refactor: Cleanup git state - commit all staged changes

Major refactoring cleanup:
- Add new controller architecture (class-controller-*.php)
- Add new settings-v2 UI (views/settings-v2/)
- Add new CSS architecture (agentic-sidebar.css, tokens)
- Add esbuild build pipeline (scripts/build.js, package.json)
- Add composer dependencies (vendor/)
- Add frontend src directory (assets/js/src/index.jsx)
- Add documentation files
- Remove old/obsolete files (class-settings.php, old CSS)

This commits all pending changes from previous refactoring efforts.
This commit is contained in:
Dwindi Ramadhana
2026-06-17 05:27:58 +07:00
parent d3f142222c
commit 690991c526
7963 changed files with 941566 additions and 67372 deletions

View File

@@ -1,143 +0,0 @@
<?php
/**
* Settings Layout - Bootstrap 5 wrapper
*
* @package WP_Agentic_Writer
* @var array $view_data Prepared view data from class-settings-v2.php
*/
if ( ! defined( 'ABSPATH' ) ) {
exit;
}
// Extract view data for easier access
extract( $view_data );
?>
<div class="wrap wpaw-settings-v2-wrap">
<div class="container py-4">
<!-- Header -->
<div class="wpaw-agentic-header mb-4">
<div class="d-flex justify-content-between align-items-center">
<div class="d-flex align-items-center gap-3">
<img src="<?php echo esc_url( WP_AGENTIC_WRITER_URL . 'assets/img/icon.svg' ); ?>"
alt="WP Agentic Writer"
style="width: 48px; height: 48px; filter: invert(1)">
<div>
<h1 class="h3 mb-1"><?php esc_html_e( 'WP Agentic Writer', 'wp-agentic-writer' ); ?></h1>
<p class="text-muted mb-0">
v<?php echo esc_html( WP_AGENTIC_WRITER_VERSION ); ?> ·
<?php esc_html_e( 'Settings & Configuration', 'wp-agentic-writer' ); ?>
</p>
</div>
</div>
</div>
</div>
<!-- Tab Navigation -->
<div class="row mb-4">
<div class="col-12">
<ul class="nav nav-pills nav-fill gap-2 p-2" id="wpaw-settings-tabs" role="tablist">
<li class="nav-item mb-0" role="presentation">
<button class="nav-link active d-flex align-items-center justify-content-center gap-2" id="general-tab" data-bs-toggle="pill" data-bs-target="#general" type="button" role="tab" aria-controls="general" aria-selected="true">
<i class="bi bi-sliders"></i>
<?php esc_html_e( 'General', 'wp-agentic-writer' ); ?>
</button>
</li>
<li class="nav-item mb-0" role="presentation">
<button class="nav-link d-flex align-items-center justify-content-center gap-2" id="models-tab" data-bs-toggle="pill" data-bs-target="#models" type="button" role="tab" aria-controls="models" aria-selected="false">
<i class="bi bi-stars"></i>
<?php esc_html_e( 'AI Models', 'wp-agentic-writer' ); ?>
</button>
</li>
<li class="nav-item mb-0" role="presentation">
<button class="nav-link d-flex align-items-center justify-content-center gap-2" id="local-backend-tab" data-bs-toggle="pill" data-bs-target="#local-backend" type="button" role="tab" aria-controls="local-backend" aria-selected="false">
<i class="bi bi-house-fill"></i>
<?php esc_html_e( 'Local Backend', 'wp-agentic-writer' ); ?>
</button>
</li>
<li class="nav-item mb-0" role="presentation">
<button class="nav-link d-flex align-items-center justify-content-center gap-2" id="cost-log-tab" data-bs-toggle="pill" data-bs-target="#cost-log" type="button" role="tab" aria-controls="cost-log" aria-selected="false">
<i class="bi bi-graph-up"></i>
<?php esc_html_e( 'Cost Log', 'wp-agentic-writer' ); ?>
</button>
</li>
<li class="nav-item mb-0" role="presentation">
<button class="nav-link d-flex align-items-center justify-content-center gap-2" id="guide-tab" data-bs-toggle="pill" data-bs-target="#guide" type="button" role="tab" aria-controls="guide" aria-selected="false">
<i class="bi bi-book"></i>
<?php esc_html_e( 'Model Guide', 'wp-agentic-writer' ); ?>
</button>
</li>
</ul>
</div>
</div>
<!-- Form Start -->
<form method="post" action="options.php" id="wpaw-settings-form">
<?php settings_fields( 'wp_agentic_writer_settings' ); ?>
<!-- Tab Content -->
<div class="tab-content" id="wpaw-settings-tab-content">
<!-- General Tab -->
<div class="tab-pane fade show active" id="general" role="tabpanel" aria-labelledby="general-tab">
<?php include WP_AGENTIC_WRITER_DIR . 'views/settings/tab-general.php'; ?>
</div>
<!-- Models Tab -->
<div class="tab-pane fade" id="models" role="tabpanel" aria-labelledby="models-tab">
<?php include WP_AGENTIC_WRITER_DIR . 'views/settings/tab-models.php'; ?>
</div>
<!-- Local Backend Tab -->
<div class="tab-pane fade" id="local-backend" role="tabpanel" aria-labelledby="local-backend-tab">
<?php include WP_AGENTIC_WRITER_DIR . 'views/settings/tab-local-backend.php'; ?>
</div>
<!-- Cost Log Tab -->
<div class="tab-pane fade" id="cost-log" role="tabpanel" aria-labelledby="cost-log-tab">
<?php include WP_AGENTIC_WRITER_DIR . 'views/settings/tab-cost-log.php'; ?>
</div>
<!-- Guide Tab -->
<div class="tab-pane fade" id="guide" role="tabpanel" aria-labelledby="guide-tab">
<?php include WP_AGENTIC_WRITER_DIR . 'views/settings/tab-guide.php'; ?>
</div>
</div>
<!-- Sticky Save Button -->
<div class="row mt-4">
<div class="col-12">
<div class="card border-0 shadow-sm">
<div class="card-body d-flex justify-content-between align-items-center py-3">
<div class="text-muted small">
<span class="dashicons dashicons-info-outline me-1"></span>
<?php esc_html_e( 'Changes are saved immediately after clicking Save.', 'wp-agentic-writer' ); ?>
</div>
<div class="d-flex gap-2">
<button type="button" class="btn btn-outline-secondary" id="wpaw-reset-settings">
<span class="dashicons dashicons-image-rotate me-1"></span>
<?php esc_html_e( 'Reset to Defaults', 'wp-agentic-writer' ); ?>
</button>
<button type="submit" class="btn btn-primary btn-lg px-4" id="wpaw-save-settings">
<span class="dashicons dashicons-saved me-1"></span>
<?php esc_html_e( 'Save Settings', 'wp-agentic-writer' ); ?>
</button>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
<!-- Toast Container for Notifications -->
<div class="toast-container position-fixed bottom-0 end-0 p-3">
<div id="wpaw-toast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<span class="me-2">✨</span>
<strong class="me-auto"><?php esc_html_e( 'WP Agentic Writer', 'wp-agentic-writer' ); ?></strong>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body" id="wpaw-toast-message"></div>
</div>
</div>

View File

@@ -1,171 +0,0 @@
<?php
/**
* Settings Tab: Cost Log
*
* Uses AJAX for server-side pagination and filtering.
*
* @package WP_Agentic_Writer
*/
if ( ! defined( 'ABSPATH' ) ) {
exit;
}
?>
<div class="row g-4">
<!-- Summary Stats -->
<div class="col-12">
<div class="card border-0 shadow-sm">
<div class="card-header bg-white border-bottom-0 pt-4 pb-0">
<div class="d-flex align-items-center">
<span class="me-3 fs-4">📊</span>
<div>
<h5 class="card-title mb-1"><?php esc_html_e( 'Cost Summary', 'wp-agentic-writer' ); ?></h5>
<p class="text-muted small mb-0"><?php esc_html_e( 'Overview of your API spending', 'wp-agentic-writer' ); ?></p>
</div>
</div>
</div>
<div class="card-body">
<div class="row g-3">
<div class="col-6 col-md-3">
<div class="p-3 rounded bg-primary bg-opacity-10 text-center">
<div class="fs-4 fw-bold text-primary" id="wpaw-stat-all-time">$0.0000</div>
<div class="text-muted small"><?php esc_html_e( 'All Time', 'wp-agentic-writer' ); ?></div>
</div>
</div>
<div class="col-6 col-md-3">
<div class="p-3 rounded bg-success bg-opacity-10 text-center">
<div class="fs-4 fw-bold text-success" id="wpaw-stat-monthly">$0.0000</div>
<div class="text-muted small"><?php esc_html_e( 'This Month', 'wp-agentic-writer' ); ?></div>
</div>
</div>
<div class="col-6 col-md-3">
<div class="p-3 rounded bg-info bg-opacity-10 text-center">
<div class="fs-4 fw-bold text-info" id="wpaw-stat-today">$0.0000</div>
<div class="text-muted small"><?php esc_html_e( 'Today', 'wp-agentic-writer' ); ?></div>
</div>
</div>
<div class="col-6 col-md-3">
<div class="p-3 rounded bg-warning bg-opacity-10 text-center">
<div class="fs-4 fw-bold text-warning" id="wpaw-stat-avg">$0.0000</div>
<div class="text-muted small"><?php esc_html_e( 'Avg Per Post', 'wp-agentic-writer' ); ?></div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Filters -->
<div class="col-12">
<div class="card border-0 shadow-sm">
<div class="card-header bg-white border-bottom-0 pt-4 pb-0">
<div class="d-flex align-items-center">
<span class="me-3 fs-4">🔍</span>
<div>
<h5 class="card-title mb-1"><?php esc_html_e( 'Filter Cost Log', 'wp-agentic-writer' ); ?></h5>
</div>
</div>
</div>
<div class="card-body">
<div class="row g-3 align-items-end">
<div class="col-md-2">
<label for="wpaw-filter-post" class="form-label small"><?php esc_html_e( 'Post ID', 'wp-agentic-writer' ); ?></label>
<input type="number" class="form-control form-control-sm" id="wpaw-filter-post" placeholder="<?php esc_attr_e( 'All', 'wp-agentic-writer' ); ?>" />
</div>
<div class="col-md-2">
<label for="wpaw-filter-model" class="form-label small"><?php esc_html_e( 'Model', 'wp-agentic-writer' ); ?></label>
<select class="form-select form-select-sm" id="wpaw-filter-model">
<option value=""><?php esc_html_e( 'All models', 'wp-agentic-writer' ); ?></option>
</select>
</div>
<div class="col-md-2">
<label for="wpaw-filter-type" class="form-label small"><?php esc_html_e( 'Type', 'wp-agentic-writer' ); ?></label>
<select class="form-select form-select-sm" id="wpaw-filter-type">
<option value=""><?php esc_html_e( 'All types', 'wp-agentic-writer' ); ?></option>
</select>
</div>
<div class="col-md-2">
<label for="wpaw-filter-date-from" class="form-label small"><?php esc_html_e( 'Date From', 'wp-agentic-writer' ); ?></label>
<input type="date" class="form-control form-control-sm" id="wpaw-filter-date-from" />
</div>
<div class="col-md-2">
<label for="wpaw-filter-date-to" class="form-label small"><?php esc_html_e( 'Date To', 'wp-agentic-writer' ); ?></label>
<input type="date" class="form-control form-control-sm" id="wpaw-filter-date-to" />
</div>
<div class="col-md-2">
<div class="d-flex gap-2">
<button type="button" class="btn btn-primary btn-sm flex-grow-1" id="wpaw-apply-filters">
<span class="dashicons dashicons-filter"></span>
</button>
<button type="button" class="btn btn-outline-secondary btn-sm" id="wpaw-clear-filters">
<span class="dashicons dashicons-dismiss"></span>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Cost Log Table -->
<div class="col-12">
<div class="card border-0 shadow-sm">
<div class="card-header bg-white border-bottom-0 pt-4 pb-0">
<div class="d-flex align-items-center justify-content-between">
<div class="d-flex align-items-center">
<span class="me-3 fs-4">📋</span>
<div>
<h5 class="card-title mb-1"><?php esc_html_e( 'Detailed Cost Log', 'wp-agentic-writer' ); ?></h5>
<p class="text-muted small mb-0" id="wpaw-records-info"><?php esc_html_e( 'Loading...', 'wp-agentic-writer' ); ?></p>
</div>
</div>
<button type="button" class="btn btn-outline-primary btn-sm" id="wpaw-export-csv">
<span class="dashicons dashicons-download me-1"></span>
<?php esc_html_e( 'Export CSV', 'wp-agentic-writer' ); ?>
</button>
</div>
</div>
<div class="card-body p-0">
<div class="table-responsive">
<table class="table table-hover mb-0" id="wpaw-cost-log-table">
<thead class="table-light">
<tr>
<th class="px-3" style="width: 50%;"><?php esc_html_e( 'Post Title', 'wp-agentic-writer' ); ?></th>
<th class="text-center"><?php esc_html_e( 'API Calls', 'wp-agentic-writer' ); ?></th>
<th class="text-end px-3"><?php esc_html_e( 'Total Cost', 'wp-agentic-writer' ); ?></th>
</tr>
</thead>
<tbody id="wpaw-cost-log-tbody">
<tr>
<td colspan="3" class="text-center py-5">
<div class="spinner-border text-primary" role="status">
<span class="visually-hidden"><?php esc_html_e( 'Loading...', 'wp-agentic-writer' ); ?></span>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<!-- Pagination -->
<div class="d-flex justify-content-between align-items-center p-3 border-top" id="wpaw-pagination-wrapper">
<div class="d-flex align-items-center gap-2">
<label for="wpaw-per-page" class="form-label mb-0 small"><?php esc_html_e( 'Per page:', 'wp-agentic-writer' ); ?></label>
<select class="form-select form-select-sm" id="wpaw-per-page" style="width: auto;">
<option value="10">10</option>
<option value="25" selected>25</option>
<option value="50">50</option>
<option value="100">100</option>
</select>
</div>
<nav aria-label="Cost log pagination">
<ul class="pagination pagination-sm mb-0" id="wpaw-pagination">
<!-- Pagination will be populated by JS -->
</ul>
</nav>
</div>
</div>
</div>
</div>
</div>

View File

@@ -1,315 +0,0 @@
<?php
/**
* Settings Tab: General
*
* @package WP_Agentic_Writer
* @var string $api_key
* @var float $monthly_budget
* @var float $monthly_used
* @var float $budget_percent
* @var string $budget_status
* @var bool $cost_tracking_enabled
* @var bool $web_search_enabled
* @var string $search_engine
* @var string $search_depth
* @var bool $enable_clarification_quiz
* @var string $clarity_confidence_threshold
* @var array $required_context_categories
* @var int $chat_history_limit
* @var array $preferred_languages
* @var array $custom_languages
*/
if ( ! defined( 'ABSPATH' ) ) {
exit;
}
$settings_instance = WP_Agentic_Writer_Settings_V2::get_instance();
$available_languages = $settings_instance->get_available_languages();
?>
<div class="row g-4">
<!-- API Configuration -->
<div class="col-12">
<div class="card border-0 shadow-sm">
<div class="card-header bg-white border-bottom-0 pt-3">
<div class="d-flex align-items-center">
<div>
<h5 class="card-title mb-1 d-flex align-items-center gap-2"><i class="bi bi-key-fill text-warning"></i><?php esc_html_e( 'API Configuration', 'wp-agentic-writer' ); ?></h5>
<p class="text-muted small mb-0"><?php esc_html_e( 'Connect to OpenRouter to access AI models', 'wp-agentic-writer' ); ?></p>
</div>
</div>
</div>
<div class="card-body">
<div class="row align-items-end">
<div class="col-md-8">
<label for="openrouter_api_key" class="form-label fw-semibold">
<?php esc_html_e( 'OpenRouter API Key', 'wp-agentic-writer' ); ?>
<span class="text-danger ms-2">*</span>
</label>
<div class="form-text">
<?php printf( wp_kses_post( __( 'Get your API key from <a href="%s" target="_blank" class="text-decoration-none">OpenRouter <i class="bi bi-box-arrow-up-right"></i></a>', 'wp-agentic-writer' ) ), 'https://openrouter.ai/keys' ); ?>
</div>
<div class="input-group">
<span class="input-group-text"><span class="dashicons dashicons-admin-network"></span></span>
<input type="password" class="form-control" id="openrouter_api_key" name="wp_agentic_writer_settings[openrouter_api_key]" value="<?php echo esc_attr( $api_key ); ?>" placeholder="sk-or-v1-..." />
<button class="btn" type="button" id="wpaw-toggle-api-key" style="border-color:#3a4a5e !important">
<span class="bi bi-eye"></span>
</button>
</div>
</div>
<div class="col-md-4">
<button type="button" class="btn btn-outline-primary w-100" id="wpaw-test-api-key">
<i class="bi bi-check-circle-fill"></i>
<?php esc_html_e( 'Test Connection', 'wp-agentic-writer' ); ?>
</button>
</div>
</div>
</div>
</div>
</div>
<!-- Budget & Cost Tracking -->
<div class="col-12">
<div class="card border-0 shadow-sm">
<div class="card-header bg-white border-bottom-0 pt-3">
<div class="d-flex align-items-center">
<div>
<h5 class="card-title mb-1 d-flex align-items-center gap-2"><i class="bi bi-currency-dollar text-warning"></i><?php esc_html_e( 'Budget & Cost Tracking', 'wp-agentic-writer' ); ?></h5>
<p class="text-muted small mb-0"><?php esc_html_e( 'Monitor and control your API spending', 'wp-agentic-writer' ); ?></p>
</div>
</div>
</div>
<div class="card-body">
<!-- Budget Overview -->
<div class="row mb-4">
<div class="col-md-4">
<div class="p-3 rounded bg-light text-center">
<div class="fs-3 fw-bold text-primary">$<?php echo number_format( $monthly_used, 2 ); ?></div>
<div class="text-muted small"><?php esc_html_e( 'Used This Month', 'wp-agentic-writer' ); ?></div>
</div>
</div>
<div class="col-md-4">
<div class="p-3">
<div class="d-flex justify-content-between mb-1">
<span class="small text-muted"><?php esc_html_e( 'Budget Usage', 'wp-agentic-writer' ); ?></span>
<span class="small fw-semibold"><?php echo number_format( $budget_percent, 1 ); ?>%</span>
</div>
<div class="progress" style="height: 10px;">
<div class="progress-bar bg-<?php echo esc_attr( $budget_status ); ?>" role="progressbar" style="width: <?php echo min( $budget_percent, 100 ); ?>%"></div>
</div>
<div class="small text-muted mt-1">
$<?php echo number_format( $monthly_used, 2 ); ?> / $<?php echo number_format( $monthly_budget, 2 ); ?>
</div>
</div>
</div>
<div class="col-md-4">
<div class="p-3 rounded bg-light text-center">
<div class="fs-3 fw-bold text-success">$<?php echo number_format( max( 0, $monthly_budget - $monthly_used ), 2 ); ?></div>
<div class="text-muted small"><?php esc_html_e( 'Remaining', 'wp-agentic-writer' ); ?></div>
</div>
</div>
</div>
<!-- Budget Input -->
<div class="row g-3">
<div class="col-md-6">
<label for="monthly_budget" class="form-label fw-semibold"><?php esc_html_e( 'Monthly Budget (USD)', 'wp-agentic-writer' ); ?></label>
<div class="input-group">
<span class="input-group-text">$</span>
<input type="number" class="form-control" id="monthly_budget" name="wp_agentic_writer_settings[monthly_budget]" value="<?php echo esc_attr( $monthly_budget ); ?>" min="0" step="0.01" />
</div>
<div class="form-text"><?php esc_html_e( 'Maximum spend per month. Set to 0 for unlimited.', 'wp-agentic-writer' ); ?></div>
</div>
<div class="col-md-6">
<label class="form-label fw-semibold"><?php esc_html_e( 'Cost Tracking', 'wp-agentic-writer' ); ?></label>
<div class="form-check form-switch d-flex align-items-center gap-2">
<input class="form-check-input" type="checkbox" id="cost_tracking_enabled" name="wp_agentic_writer_settings[cost_tracking_enabled]" value="1" <?php checked( $cost_tracking_enabled ); ?> />
<label class="form-check-label" for="cost_tracking_enabled">
<?php esc_html_e( 'Enable cost tracking in editor sidebar', 'wp-agentic-writer' ); ?>
</label>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Research & Web Search -->
<div class="col-12">
<div class="card border-0 shadow-sm">
<div class="card-header bg-white border-bottom-0 pt-3">
<div class="d-flex align-items-center">
<div>
<h5 class="card-title mb-1 d-flex align-items-center gap-2"><i class="bi bi-search text-warning"></i><?php esc_html_e( 'Research & Web Search', 'wp-agentic-writer' ); ?></h5>
<p class="text-muted small mb-0"><?php esc_html_e( 'Configure web search for up-to-date content', 'wp-agentic-writer' ); ?></p>
</div>
</div>
</div>
<div class="card-body">
<div class="row g-3">
<div class="col-12">
<div class="form-check form-switch d-flex align-items-center gap-2">
<input class="form-check-input" type="checkbox" id="web_search_enabled" name="wp_agentic_writer_settings[web_search_enabled]" value="1" <?php checked( $web_search_enabled ); ?> />
<label class="form-check-label" for="web_search_enabled">
<?php esc_html_e( 'Enable Web Search', 'wp-agentic-writer' ); ?>
<span class="badge text-bg-warning ms-2">~$0.02 per search</span>
</label>
</div>
<div class="form-text"><?php esc_html_e( 'Search the web for current information. Can be toggled per-request in sidebar.', 'wp-agentic-writer' ); ?></div>
</div>
<div class="col-md-6">
<label for="search_engine" class="form-label fw-semibold"><?php esc_html_e( 'Search Engine', 'wp-agentic-writer' ); ?></label>
<select class="form-select" id="search_engine" name="wp_agentic_writer_settings[search_engine]">
<option value="auto" <?php selected( $search_engine, 'auto' ); ?>><?php esc_html_e( 'Auto (Native if available, Exa fallback)', 'wp-agentic-writer' ); ?></option>
<option value="native" <?php selected( $search_engine, 'native' ); ?>><?php esc_html_e( 'Native (Provider\'s built-in search)', 'wp-agentic-writer' ); ?></option>
<option value="exa" <?php selected( $search_engine, 'exa' ); ?>><?php esc_html_e( 'Exa (Always use Exa search)', 'wp-agentic-writer' ); ?></option>
</select>
</div>
<div class="col-md-6">
<label for="search_depth" class="form-label fw-semibold"><?php esc_html_e( 'Search Depth', 'wp-agentic-writer' ); ?></label>
<select class="form-select" id="search_depth" name="wp_agentic_writer_settings[search_depth]">
<option value="low" <?php selected( $search_depth, 'low' ); ?>><?php esc_html_e( 'Low (Basic queries)', 'wp-agentic-writer' ); ?></option>
<option value="medium" <?php selected( $search_depth, 'medium' ); ?>><?php esc_html_e( 'Medium (General queries)', 'wp-agentic-writer' ); ?></option>
<option value="high" <?php selected( $search_depth, 'high' ); ?>><?php esc_html_e( 'High (Detailed research)', 'wp-agentic-writer' ); ?></option>
</select>
</div>
</div>
</div>
</div>
</div>
<!-- Clarification Quiz -->
<div class="col-12">
<div class="card border-0 shadow-sm">
<div class="card-header bg-white border-bottom-0 pt-3">
<div class="d-flex align-items-center">
<div>
<h5 class="card-title mb-1 d-flex align-items-center gap-2"><i class="bi bi-question-circle text-warning"></i><?php esc_html_e( 'Clarification Quiz', 'wp-agentic-writer' ); ?></h5>
<p class="text-muted small mb-0"><?php esc_html_e( 'Gather context before writing for better results', 'wp-agentic-writer' ); ?></p>
</div>
</div>
</div>
<div class="card-body">
<div class="row g-3">
<div class="col-12">
<div class="form-check form-switch d-flex align-items-center gap-2">
<input class="form-check-input" type="checkbox" id="enable_clarification_quiz" name="wp_agentic_writer_settings[enable_clarification_quiz]" value="1" <?php checked( $enable_clarification_quiz ); ?> />
<label class="form-check-label" for="enable_clarification_quiz">
<?php esc_html_e( 'Ask clarifying questions when context is missing', 'wp-agentic-writer' ); ?>
</label>
</div>
</div>
<div class="col-md-6">
<label for="clarity_confidence_threshold" class="form-label fw-semibold"><?php esc_html_e( 'Confidence Threshold', 'wp-agentic-writer' ); ?></label>
<select class="form-select" id="clarity_confidence_threshold" name="wp_agentic_writer_settings[clarity_confidence_threshold]">
<option value="0.5" <?php selected( $clarity_confidence_threshold, '0.5' ); ?>><?php esc_html_e( 'Very Sensitive (50%)', 'wp-agentic-writer' ); ?></option>
<option value="0.6" <?php selected( $clarity_confidence_threshold, '0.6' ); ?>><?php esc_html_e( 'Sensitive (60%) - Recommended', 'wp-agentic-writer' ); ?></option>
<option value="0.7" <?php selected( $clarity_confidence_threshold, '0.7' ); ?>><?php esc_html_e( 'Balanced (70%)', 'wp-agentic-writer' ); ?></option>
<option value="0.8" <?php selected( $clarity_confidence_threshold, '0.8' ); ?>><?php esc_html_e( 'Strict (80%)', 'wp-agentic-writer' ); ?></option>
<option value="0.9" <?php selected( $clarity_confidence_threshold, '0.9' ); ?>><?php esc_html_e( 'Very Strict (90%)', 'wp-agentic-writer' ); ?></option>
</select>
<div class="form-text"><?php esc_html_e( 'When to trigger the clarification quiz', 'wp-agentic-writer' ); ?></div>
</div>
<div class="col-md-6">
<label class="form-label fw-semibold"><?php esc_html_e( 'Context Categories', 'wp-agentic-writer' ); ?></label>
<div class="border rounded p-3" style="max-height: 200px; overflow-y: auto;">
<?php
$categories = array(
'target_outcome' => __( 'Target Outcome', 'wp-agentic-writer' ),
'target_audience' => __( 'Target Audience', 'wp-agentic-writer' ),
'tone' => __( 'Tone of Voice', 'wp-agentic-writer' ),
'content_depth' => __( 'Content Depth', 'wp-agentic-writer' ),
'expertise_level' => __( 'Expertise Level', 'wp-agentic-writer' ),
'content_type' => __( 'Content Type', 'wp-agentic-writer' ),
'pov' => __( 'Point of View', 'wp-agentic-writer' ),
);
foreach ( $categories as $value => $label ) :
?>
<div class="form-check d-flex align-items-center gap-2">
<input class="form-check-input" type="checkbox" id="cat_<?php echo esc_attr( $value ); ?>" name="wp_agentic_writer_settings[required_context_categories][]" value="<?php echo esc_attr( $value ); ?>" <?php checked( in_array( $value, $required_context_categories, true ) ); ?> />
<label class="form-check-label" for="cat_<?php echo esc_attr( $value ); ?>"><?php echo esc_html( $label ); ?></label>
</div>
<?php endforeach; ?>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Content Settings / Language -->
<div class="col-12">
<div class="card border-0 shadow-sm">
<div class="card-header bg-white border-bottom-0 pt-3">
<div class="d-flex align-items-center">
<div>
<h5 class="card-title mb-1 d-flex align-items-center gap-2"><i class="bi bi-globe text-warning"></i><?php esc_html_e( 'Content Settings', 'wp-agentic-writer' ); ?></h5>
<p class="text-muted small mb-0"><?php esc_html_e( 'Configure language preferences for your content', 'wp-agentic-writer' ); ?></p>
</div>
</div>
</div>
<div class="card-body">
<div class="row g-3">
<div class="col-12">
<label class="form-label fw-semibold"><?php esc_html_e( 'Preferred Languages', 'wp-agentic-writer' ); ?></label>
<div class="row row-cols-2 row-cols-md-4 g-2">
<?php foreach ( $available_languages as $code => $label ) : ?>
<div class="col">
<div class="form-check d-flex align-items-center gap-2">
<input class="form-check-input" type="checkbox" id="lang_<?php echo esc_attr( $code ); ?>" name="wp_agentic_writer_settings[preferred_languages][]" value="<?php echo esc_attr( $code ); ?>" <?php checked( in_array( $code, $preferred_languages, true ) ); ?> />
<label class="form-check-label small" for="lang_<?php echo esc_attr( $code ); ?>"><?php echo esc_html( $label ); ?></label>
</div>
</div>
<?php endforeach; ?>
</div>
<div class="form-text mt-2"><?php esc_html_e( 'Select which languages will appear in the language selector when creating articles.', 'wp-agentic-writer' ); ?></div>
</div>
<div class="col-12">
<label class="form-label fw-semibold"><?php esc_html_e( 'Custom Languages', 'wp-agentic-writer' ); ?></label>
<div id="wpaw-custom-languages-list">
<?php if ( ! empty( $custom_languages ) ) : ?>
<?php foreach ( $custom_languages as $lang ) : ?>
<div class="input-group mb-2 wpaw-custom-language-item">
<input type="text" class="form-control" name="wp_agentic_writer_settings[custom_languages][]" value="<?php echo esc_attr( $lang ); ?>" placeholder="<?php esc_attr_e( 'e.g., Betawi, Minangkabau', 'wp-agentic-writer' ); ?>" />
<button type="button" class="btn btn-outline-danger wpaw-remove-language">
<span class="dashicons dashicons-no-alt"></span>
</button>
</div>
<?php endforeach; ?>
<?php endif; ?>
</div>
<button type="button" id="wpaw-add-custom-language" class="btn btn-outline-secondary btn-sm">
<span class="dashicons dashicons-plus-alt2 me-1"></span>
<?php esc_html_e( 'Add Custom Language', 'wp-agentic-writer' ); ?>
</button>
<div class="form-text mt-2"><?php esc_html_e( 'Add any language not listed above (e.g., regional dialects, minority languages).', 'wp-agentic-writer' ); ?></div>
</div>
</div>
</div>
</div>
</div>
<!-- Advanced Settings -->
<div class="col-12">
<div class="card border-0 shadow-sm">
<div class="card-header bg-white border-bottom-0 pt-3">
<div class="d-flex align-items-center">
<div>
<h5 class="card-title mb-1 d-flex align-items-center gap-2"><i class="bi bi-gear text-warning"></i><?php esc_html_e( 'Advanced Settings', 'wp-agentic-writer' ); ?></h5>
<p class="text-muted small mb-0"><?php esc_html_e( 'Additional configuration options', 'wp-agentic-writer' ); ?></p>
</div>
</div>
</div>
<div class="card-body">
<div class="row g-3">
<div class="col-md-6">
<label for="chat_history_limit" class="form-label fw-semibold"><?php esc_html_e( 'Chat History Limit', 'wp-agentic-writer' ); ?></label>
<input type="number" class="form-control" id="chat_history_limit" name="wp_agentic_writer_settings[chat_history_limit]" value="<?php echo esc_attr( $chat_history_limit ); ?>" min="0" max="200" style="max-width: 120px;" />
<div class="form-text"><?php esc_html_e( 'Messages stored per post. Set to 0 to disable chat history.', 'wp-agentic-writer' ); ?></div>
</div>
</div>
</div>
</div>
</div>
</div>

View File

@@ -1,229 +0,0 @@
<?php
/**
* Settings Tab: Model Guide
*
* @package WP_Agentic_Writer
*/
if ( ! defined( 'ABSPATH' ) ) {
exit;
}
?>
<div class="row g-4">
<!-- How Models Are Used -->
<div class="col-12">
<div class="card border-0 shadow-sm">
<div class="card-header bg-white border-bottom-0 pt-4 pb-0">
<div class="d-flex align-items-center">
<span class="me-3 fs-4">📖</span>
<div>
<h5 class="card-title mb-1"><?php esc_html_e( 'How AI Models Are Used', 'wp-agentic-writer' ); ?></h5>
<p class="text-muted small mb-0"><?php esc_html_e( 'Understanding which model handles each task', 'wp-agentic-writer' ); ?></p>
</div>
</div>
</div>
<div class="card-body p-0">
<div class="table-responsive">
<table class="table table-hover mb-0">
<thead class="table-light">
<tr>
<th class="px-3"><?php esc_html_e( 'Task', 'wp-agentic-writer' ); ?></th>
<th><?php esc_html_e( 'Model Used', 'wp-agentic-writer' ); ?></th>
<th><?php esc_html_e( 'Est. Cost', 'wp-agentic-writer' ); ?></th>
<th class="px-3"><?php esc_html_e( 'Description', 'wp-agentic-writer' ); ?></th>
</tr>
</thead>
<tbody>
<tr>
<td class="px-3 fw-semibold"><?php esc_html_e( 'Planning', 'wp-agentic-writer' ); ?></td>
<td><span class="badge bg-info-subtle text-info"><?php esc_html_e( 'Planning Model', 'wp-agentic-writer' ); ?></span></td>
<td class="text-muted">~$0.001</td>
<td class="px-3 small text-muted"><?php esc_html_e( 'Creates article outline with sections and structure', 'wp-agentic-writer' ); ?></td>
</tr>
<tr>
<td class="px-3 fw-semibold"><?php esc_html_e( 'Clarity Check', 'wp-agentic-writer' ); ?></td>
<td><span class="badge bg-secondary-subtle text-secondary"><?php esc_html_e( 'Clarity Model', 'wp-agentic-writer' ); ?></span></td>
<td class="text-muted">~$0.0005</td>
<td class="px-3 small text-muted"><?php esc_html_e( 'Analyzes your prompt and asks clarifying questions', 'wp-agentic-writer' ); ?></td>
</tr>
<tr class="table-primary">
<td class="px-3 fw-semibold"><?php esc_html_e( 'Writing', 'wp-agentic-writer' ); ?></td>
<td><span class="badge bg-primary"><?php esc_html_e( 'Writing Model', 'wp-agentic-writer' ); ?></span></td>
<td class="text-muted">~$0.05-0.15</td>
<td class="px-3 small text-muted"><?php esc_html_e( 'Generates full article content section by section', 'wp-agentic-writer' ); ?></td>
</tr>
<tr>
<td class="px-3 fw-semibold"><?php esc_html_e( 'Chat', 'wp-agentic-writer' ); ?></td>
<td><span class="badge bg-success-subtle text-success"><?php esc_html_e( 'Chat Model', 'wp-agentic-writer' ); ?></span></td>
<td class="text-muted">~$0.001</td>
<td class="px-3 small text-muted"><?php esc_html_e( 'Answers questions and provides quick assistance', 'wp-agentic-writer' ); ?></td>
</tr>
<tr>
<td class="px-3 fw-semibold"><?php esc_html_e( 'Block Refinement', 'wp-agentic-writer' ); ?></td>
<td><span class="badge bg-warning-subtle text-warning"><?php esc_html_e( 'Refinement Model', 'wp-agentic-writer' ); ?></span></td>
<td class="text-muted">~$0.01-0.03</td>
<td class="px-3 small text-muted"><?php esc_html_e( 'Improves or rewrites selected content blocks', 'wp-agentic-writer' ); ?></td>
</tr>
<tr>
<td class="px-3 fw-semibold"><?php esc_html_e( 'Web Search', 'wp-agentic-writer' ); ?></td>
<td><span class="badge bg-dark-subtle text-dark"><?php esc_html_e( 'OpenRouter Plugin', 'wp-agentic-writer' ); ?></span></td>
<td class="text-muted">~$0.02</td>
<td class="px-3 small text-muted"><?php esc_html_e( 'Searches web for current information (toggle in sidebar)', 'wp-agentic-writer' ); ?></td>
</tr>
<tr>
<td class="px-3 fw-semibold"><?php esc_html_e( 'Image Generation', 'wp-agentic-writer' ); ?></td>
<td><span class="badge bg-danger-subtle text-danger"><?php esc_html_e( 'Image Model', 'wp-agentic-writer' ); ?></span></td>
<td class="text-muted">$0.003-0.04</td>
<td class="px-3 small text-muted"><?php esc_html_e( 'Creates images for articles', 'wp-agentic-writer' ); ?></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<!-- Recommended Models -->
<div class="col-12">
<div class="card border-0 shadow-sm">
<div class="card-header bg-white border-bottom-0 pt-4 pb-0">
<div class="d-flex align-items-center">
<span class="me-3 fs-4">⭐</span>
<div>
<h5 class="card-title mb-1"><?php esc_html_e( 'Recommended Models', 'wp-agentic-writer' ); ?></h5>
<p class="text-muted small mb-0"><?php esc_html_e( 'Best models for each purpose based on quality and cost', 'wp-agentic-writer' ); ?></p>
</div>
</div>
</div>
<div class="card-body p-0">
<div class="table-responsive">
<table class="table table-hover mb-0">
<thead class="table-light">
<tr>
<th class="px-3"><?php esc_html_e( 'Model', 'wp-agentic-writer' ); ?></th>
<th><?php esc_html_e( 'Best For', 'wp-agentic-writer' ); ?></th>
<th><?php esc_html_e( 'Cost (per 1M tokens)', 'wp-agentic-writer' ); ?></th>
<th class="px-3"><?php esc_html_e( 'Notes', 'wp-agentic-writer' ); ?></th>
</tr>
</thead>
<tbody>
<tr class="table-success">
<td class="px-3 fw-semibold">Gemini 2.5 Flash</td>
<td><?php esc_html_e( 'Chat, Clarity, Planning', 'wp-agentic-writer' ); ?></td>
<td><code>$0.15 / $0.60</code></td>
<td class="px-3 small">⭐ <?php esc_html_e( 'Best balanced option. Fast reasoning.', 'wp-agentic-writer' ); ?></td>
</tr>
<tr>
<td class="px-3 fw-semibold">Gemini 3 Flash Preview</td>
<td><?php esc_html_e( 'Chat, Clarity, Planning (Premium)', 'wp-agentic-writer' ); ?></td>
<td><code>$0.50 / $3.00</code></td>
<td class="px-3 small">🏆 <?php esc_html_e( 'Latest Gemini. Near Pro performance.', 'wp-agentic-writer' ); ?></td>
</tr>
<tr class="table-primary">
<td class="px-3 fw-semibold">Claude 3.5 Sonnet</td>
<td><?php esc_html_e( 'Writing, Refinement', 'wp-agentic-writer' ); ?></td>
<td><code>$3.00 / $15.00</code></td>
<td class="px-3 small">⭐ <?php esc_html_e( 'Best quality writing. Recommended.', 'wp-agentic-writer' ); ?></td>
</tr>
<tr>
<td class="px-3 fw-semibold">Mistral Small Creative</td>
<td><?php esc_html_e( 'Writing (Budget)', 'wp-agentic-writer' ); ?></td>
<td><code>$0.10 / $0.30</code></td>
<td class="px-3 small">💰 <?php esc_html_e( 'Best budget writing. Creative style.', 'wp-agentic-writer' ); ?></td>
</tr>
<tr>
<td class="px-3 fw-semibold">GPT-4.1</td>
<td><?php esc_html_e( 'Writing, Refinement (Premium)', 'wp-agentic-writer' ); ?></td>
<td><code>$2.00 / $8.00</code></td>
<td class="px-3 small">🏆 <?php esc_html_e( 'Premium option. Excellent instruction following.', 'wp-agentic-writer' ); ?></td>
</tr>
<tr>
<td class="px-3 fw-semibold">Claude Sonnet 4</td>
<td><?php esc_html_e( 'Clarity (Premium)', 'wp-agentic-writer' ); ?></td>
<td><code>$3.00 / $15.00</code></td>
<td class="px-3 small">🏆 <?php esc_html_e( 'Latest Claude. Deep analysis.', 'wp-agentic-writer' ); ?></td>
</tr>
<tr class="table-warning">
<td class="px-3 fw-semibold">GPT-4o</td>
<td><?php esc_html_e( 'Image Prompts', 'wp-agentic-writer' ); ?></td>
<td><code>$2.50 / $10.00</code></td>
<td class="px-3 small">⭐ <?php esc_html_e( 'Generates image descriptions for prompts.', 'wp-agentic-writer' ); ?></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<!-- Cost Examples -->
<div class="col-12">
<div class="card border-0 shadow-sm">
<div class="card-header bg-white border-bottom-0 pt-4 pb-0">
<div class="d-flex align-items-center">
<span class="me-3 fs-4">💡</span>
<div>
<h5 class="card-title mb-1"><?php esc_html_e( 'Cost Examples', 'wp-agentic-writer' ); ?></h5>
<p class="text-muted small mb-0"><?php esc_html_e( 'Real-world cost estimates for common tasks', 'wp-agentic-writer' ); ?></p>
</div>
</div>
</div>
<div class="card-body">
<div class="row g-3">
<!-- Single Article -->
<div class="col-md-4">
<div class="card h-100 border">
<div class="card-body">
<h6 class="card-title"><?php esc_html_e( 'Single Article (Balanced)', 'wp-agentic-writer' ); ?></h6>
<ul class="list-unstyled small text-muted mb-3">
<li><?php esc_html_e( 'Clarity Check', 'wp-agentic-writer' ); ?>: ~$0.001</li>
<li><?php esc_html_e( 'Planning', 'wp-agentic-writer' ); ?>: ~$0.001</li>
<li><?php esc_html_e( 'Writing (5 sections)', 'wp-agentic-writer' ); ?>: ~$0.10</li>
<li><?php esc_html_e( '1 Image', 'wp-agentic-writer' ); ?>: ~$0.003</li>
</ul>
<div class="d-flex justify-content-between align-items-center border-top pt-2">
<span class="text-muted"><?php esc_html_e( 'Total', 'wp-agentic-writer' ); ?></span>
<span class="fs-5 fw-bold text-primary">~$0.10-0.15</span>
</div>
</div>
</div>
</div>
<!-- 10 Articles/Month -->
<div class="col-md-4">
<div class="card h-100 border">
<div class="card-body">
<h6 class="card-title"><?php esc_html_e( '10 Articles/Month (Balanced)', 'wp-agentic-writer' ); ?></h6>
<ul class="list-unstyled small text-muted mb-3">
<li><?php esc_html_e( '10 articles × $0.15', 'wp-agentic-writer' ); ?></li>
<li><?php esc_html_e( 'Some chat interactions', 'wp-agentic-writer' ); ?>: ~$0.05</li>
<li><?php esc_html_e( 'Refinements', 'wp-agentic-writer' ); ?>: ~$0.20</li>
</ul>
<div class="d-flex justify-content-between align-items-center border-top pt-2">
<span class="text-muted"><?php esc_html_e( 'Total', 'wp-agentic-writer' ); ?></span>
<span class="fs-5 fw-bold text-primary">~$1.50-2.00</span>
</div>
</div>
</div>
</div>
<!-- With Web Search -->
<div class="col-md-4">
<div class="card h-100 border">
<div class="card-body">
<h6 class="card-title"><?php esc_html_e( 'With Web Search', 'wp-agentic-writer' ); ?></h6>
<ul class="list-unstyled small text-muted mb-3">
<li><?php esc_html_e( 'Add ~$0.02 per search request', 'wp-agentic-writer' ); ?></li>
<li><?php esc_html_e( 'Typical: 1-2 searches per article', 'wp-agentic-writer' ); ?></li>
</ul>
<div class="d-flex justify-content-between align-items-center border-top pt-2">
<span class="text-muted"><?php esc_html_e( 'Extra', 'wp-agentic-writer' ); ?></span>
<span class="fs-5 fw-bold text-warning">~$0.02-0.04</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

View File

@@ -1,307 +0,0 @@
<?php
/**
* Settings Tab: Local Backend
*
* @package WP_Agentic_Writer
* @var string $local_backend_url
* @var string $local_backend_key
* @var string $local_backend_model
* @var bool $local_backend_enabled
*/
if ( ! defined( 'ABSPATH' ) ) {
exit;
}
?>
<div class="row g-4">
<!-- Download Package -->
<div class="col-12">
<div class="card border-0 shadow-sm alert alert-info">
<div class="card-header bg-white border-bottom-0 pt-3">
<div class="d-flex align-items-center">
<div>
<h5 class="card-title mb-1 d-flex align-items-center gap-2">
<i class="bi bi-download text-primary"></i>
<?php esc_html_e( 'Step 1: Download Local Backend Package', 'wp-agentic-writer' ); ?>
</h5>
<p class="text-muted small mb-0">
<?php esc_html_e( 'Run AI inference on your own machine with your Claude CLI + Z.ai account', 'wp-agentic-writer' ); ?>
</p>
</div>
</div>
</div>
<div class="card-body">
<p class="mb-3">
<?php esc_html_e( 'Download the Local Backend proxy to run on your development machine. This allows unlimited, private AI content generation using your existing Claude CLI setup.', 'wp-agentic-writer' ); ?>
</p>
<a href="<?php echo esc_url( WP_AGENTIC_WRITER_URL . 'downloads/agentic-writer-local-backend.zip' ); ?>"
class="btn btn-primary btn-lg" download>
<i class="bi bi-download me-2"></i>
<?php esc_html_e( 'Download Local Backend v1.0.0', 'wp-agentic-writer' ); ?>
</a>
<details class="mt-3">
<summary class="fw-semibold" style="cursor: pointer;">
<?php esc_html_e( 'Prerequisites', 'wp-agentic-writer' ); ?>
</summary>
<ul class="mt-2">
<li>
✅ <strong><?php esc_html_e( 'Claude CLI', 'wp-agentic-writer' ); ?></strong> -
<?php esc_html_e( 'Get from', 'wp-agentic-writer' ); ?>
<a href="https://claude.ai/code" target="_blank">claude.ai/code</a>
<?php esc_html_e( 'or', 'wp-agentic-writer' ); ?>
<a href="https://z.ai" target="_blank">z.ai</a>
</li>
<li>
✅ <strong><?php esc_html_e( 'Node.js 18+', 'wp-agentic-writer' ); ?></strong> -
<a href="https://nodejs.org" target="_blank"><?php esc_html_e( 'Download', 'wp-agentic-writer' ); ?></a>
</li>
<li>
✅ <strong><?php esc_html_e( 'Z.ai Coding Plan or Anthropic API key', 'wp-agentic-writer' ); ?></strong> -
<?php esc_html_e( 'Configured in Claude CLI', 'wp-agentic-writer' ); ?>
</li>
</ul>
</details>
</div>
</div>
</div>
<!-- Configuration -->
<div class="col-12">
<div class="card border-0 shadow-sm">
<div class="card-header bg-white border-bottom-0 pt-3">
<div class="d-flex align-items-center">
<div>
<h5 class="card-title mb-1 d-flex align-items-center gap-2">
<i class="bi bi-gear-fill text-success"></i>
<?php esc_html_e( 'Step 2: Configure Connection', 'wp-agentic-writer' ); ?>
</h5>
<p class="text-muted small mb-0">
<?php esc_html_e( 'After starting the proxy, enter the connection details here', 'wp-agentic-writer' ); ?>
</p>
</div>
</div>
</div>
<div class="card-body">
<div class="mb-3">
<label for="local_backend_url" class="form-label fw-semibold">
<?php esc_html_e( 'Base URL', 'wp-agentic-writer' ); ?>
<span class="text-danger ms-2">*</span>
</label>
<input type="url"
class="form-control"
id="local_backend_url"
name="wp_agentic_writer_settings[local_backend_url]"
value="<?php echo esc_attr( $local_backend_url ); ?>"
placeholder="http://192.168.1.105:8080">
<div class="form-text">
<?php esc_html_e( 'Enter the URL from your Local Backend startup message (e.g., http://YOUR-IP:8080)', 'wp-agentic-writer' ); ?>
</div>
</div>
<div class="mb-3">
<label for="local_backend_key" class="form-label fw-semibold">
<?php esc_html_e( 'API Key', 'wp-agentic-writer' ); ?>
</label>
<input type="text"
class="form-control"
id="local_backend_key"
name="wp_agentic_writer_settings[local_backend_key]"
value="<?php echo esc_attr( $local_backend_key ); ?>"
placeholder="dummy">
<div class="form-text">
<?php esc_html_e( 'Use "dummy" for local backend (ignored by proxy)', 'wp-agentic-writer' ); ?>
</div>
</div>
<div class="mb-3">
<label for="local_backend_model" class="form-label fw-semibold">
<?php esc_html_e( 'Model', 'wp-agentic-writer' ); ?>
</label>
<input type="text"
class="form-control"
id="local_backend_model"
name="wp_agentic_writer_settings[local_backend_model]"
value="<?php echo esc_attr( $local_backend_model ); ?>"
placeholder="claude-local">
<div class="form-text">
<?php esc_html_e( 'Model identifier (informational only, proxy uses your Claude CLI default)', 'wp-agentic-writer' ); ?>
</div>
</div>
<div class="d-flex gap-2 align-items-center">
<button type="button" id="test-local-backend" class="btn btn-outline-primary">
<i class="bi bi-plug me-2"></i>
<?php esc_html_e( 'Test Connection', 'wp-agentic-writer' ); ?>
</button>
<span id="connection-status" class="ms-2"></span>
</div>
</div>
</div>
</div>
<!-- Task Routing (Optional) -->
<div class="col-12">
<div class="card border-0 shadow-sm">
<div class="card-header bg-white border-bottom-0 pt-3">
<div class="d-flex align-items-center">
<div>
<h5 class="card-title mb-1 d-flex align-items-center gap-2">
<i class="bi bi-diagram-3 text-warning"></i>
<?php esc_html_e( 'Step 3: Provider Routing (Advanced)', 'wp-agentic-writer' ); ?>
</h5>
<p class="text-muted small mb-0">
<?php esc_html_e( 'Choose which provider to use for each task type', 'wp-agentic-writer' ); ?>
</p>
</div>
</div>
</div>
<div class="card-body">
<div class="alert alert-info mb-3">
<i class="bi bi-info-circle me-2"></i>
<strong><?php esc_html_e( 'Recommended Setup:', 'wp-agentic-writer' ); ?></strong>
<?php esc_html_e( 'Use Local Backend for all text tasks (free, fast, private). Use OpenRouter for images (only option).', 'wp-agentic-writer' ); ?>
</div>
<?php
$task_types = array(
'chat' => __( 'Chat & Discussion', 'wp-agentic-writer' ),
'clarity' => __( 'Clarity Check & Quiz', 'wp-agentic-writer' ),
'planning' => __( 'Outline Planning', 'wp-agentic-writer' ),
'writing' => __( 'Article Writing', 'wp-agentic-writer' ),
'refinement' => __( 'Content Refinement', 'wp-agentic-writer' ),
'image' => __( 'Image Generation', 'wp-agentic-writer' ),
);
$task_providers = $settings['task_providers'] ?? array();
?>
<table class="table">
<thead>
<tr>
<th><?php esc_html_e( 'Task Type', 'wp-agentic-writer' ); ?></th>
<th><?php esc_html_e( 'Provider', 'wp-agentic-writer' ); ?></th>
</tr>
</thead>
<tbody>
<?php foreach ( $task_types as $task_key => $task_label ) : ?>
<tr>
<td><?php echo esc_html( $task_label ); ?></td>
<td>
<select class="form-select form-select-sm"
name="wp_agentic_writer_settings[task_providers][<?php echo esc_attr( $task_key ); ?>]">
<?php
$current_provider = $task_providers[ $task_key ] ?? 'openrouter';
// Available providers per task
$providers = array(
'openrouter' => '☁️ OpenRouter (Cloud)',
);
// Add local backend for text tasks
if ( 'image' !== $task_key ) {
$providers['local_backend'] = '🏠 Local Backend (Free)';
$providers['codex'] = '🔗 Codex (OpenAI)';
}
foreach ( $providers as $provider_key => $provider_label ) :
?>
<option value="<?php echo esc_attr( $provider_key ); ?>"
<?php selected( $current_provider, $provider_key ); ?>>
<?php echo esc_html( $provider_label ); ?>
</option>
<?php endforeach; ?>
</select>
</td>
</tr>
<?php endforeach; ?>
</tbody>
</table>
</div>
</div>
</div>
<!-- Help -->
<div class="col-12">
<div class="card border-0 shadow-sm border-warning">
<div class="card-header bg-white border-bottom-0 pt-3">
<h5 class="card-title mb-0 d-flex align-items-center gap-2">
<i class="bi bi-question-circle text-warning"></i>
<?php esc_html_e( 'Troubleshooting', 'wp-agentic-writer' ); ?>
</h5>
</div>
<div class="card-body">
<ul class="mb-0">
<li>
<strong><?php esc_html_e( 'Connection failed?', 'wp-agentic-writer' ); ?></strong>
<?php esc_html_e( 'Ensure proxy is running:', 'wp-agentic-writer' ); ?>
<code>./start-proxy.sh</code>
</li>
<li>
<strong><?php esc_html_e( 'Wrong IP?', 'wp-agentic-writer' ); ?></strong>
<?php esc_html_e( 'Run', 'wp-agentic-writer' ); ?>
<code>./get-local-ip.sh</code>
<?php esc_html_e( 'to find correct address', 'wp-agentic-writer' ); ?>
</li>
<li>
<strong><?php esc_html_e( 'Firewall blocking?', 'wp-agentic-writer' ); ?></strong>
<?php esc_html_e( 'Allow Node.js on port 8080 in your system firewall', 'wp-agentic-writer' ); ?>
</li>
<li>
<strong><?php esc_html_e( 'Claude not found?', 'wp-agentic-writer' ); ?></strong>
<?php esc_html_e( 'Check Claude CLI:', 'wp-agentic-writer' ); ?>
<code>which claude</code>
<?php esc_html_e( 'or', 'wp-agentic-writer' ); ?>
<code>claude --version</code>
</li>
</ul>
<p class="mt-3 mb-0">
<strong><?php esc_html_e( 'Need help?', 'wp-agentic-writer' ); ?></strong>
<?php esc_html_e( 'Check the README.md and TROUBLESHOOTING.md files in the downloaded package.', 'wp-agentic-writer' ); ?>
</p>
</div>
</div>
</div>
</div>
<script>
jQuery(document).ready(function($) {
$('#test-local-backend').on('click', function() {
const btn = $(this);
const status = $('#connection-status');
const url = $('#local_backend_url').val();
if (!url) {
status.html('<span class="text-warning">⚠️ Enter Base URL first</span>');
return;
}
btn.prop('disabled', true).html('<i class="spinner-border spinner-border-sm me-2"></i>Testing...');
status.html('<span class="text-white" style="color:#17a2b8 !important;">⏳ Connecting...</span>');
$.ajax({
url: ajaxurl,
method: 'POST',
data: {
action: 'wpaw_test_local_backend',
url: url,
nonce: '<?php echo esc_js( wp_create_nonce( 'wpaw_test_local_backend' ) ); ?>'
},
success: function(response) {
if (response.success) {
status.html('<span class="text-success">✅ ' + response.data.message + '</span>');
} else {
status.html('<span class="text-danger">❌ ' + (response.data.message || 'Failed') + '</span>');
}
},
error: function(xhr) {
status.html('<span class="text-danger">❌ Connection failed. Check URL and proxy status.</span>');
},
complete: function() {
btn.prop('disabled', false).html('<i class="bi bi-plug me-2"></i><?php esc_html_e( 'Test Connection', 'wp-agentic-writer' ); ?>');
}
});
});
});
</script>

View File

@@ -1,267 +0,0 @@
<?php
/**
* Settings Tab: AI Models
*
* @package WP_Agentic_Writer
* @var string $chat_model
* @var string $clarity_model
* @var string $planning_model
* @var string $writing_model
* @var string $refinement_model
* @var string $image_model
* @var array $custom_models
*/
if ( ! defined( 'ABSPATH' ) ) {
exit;
}
?>
<div class="row g-4">
<!-- Quick Presets -->
<div class="col-12">
<div class="card border-0 shadow-sm">
<div class="card-header bg-white border-bottom-0 pt-3">
<div class="d-flex align-items-center">
<div>
<h5 class="card-title mb-1 d-flex align-items-center gap-2"><i class="bi bi-lightning-fill text-warning"></i><?php esc_html_e( 'Quick Presets', 'wp-agentic-writer' ); ?></h5>
<p class="text-muted small mb-0"><?php esc_html_e( 'One-click configurations for different budgets', 'wp-agentic-writer' ); ?></p>
</div>
</div>
</div>
<div class="card-body">
<div class="row g-3">
<!-- Budget Preset -->
<div class="col-md-4">
<div class="card border-2 preset-card" data-preset="budget" role="button" tabindex="0">
<div class="card-body">
<div class="d-flex justify-content-between align-items-start mb-2">
<h6 class="card-title mb-0"><?php esc_html_e( 'Budget', 'wp-agentic-writer' ); ?></h6>
<span class="badge text-success" style="color: rgba(var(--bs-success-rgb),var(--bs-text-opacity))!important;">💰 ~$0.06/article</span>
</div>
<div class="small text-muted">
<div><strong>Chat/Clarity/Planning/Refinement:</strong> Gemini 2.5 Flash</div>
<div><strong>Writing:</strong> Mistral Small Creative</div>
<div><strong>Image:</strong> FLUX.2 klein</div>
</div>
</div>
</div>
</div>
<!-- Balanced Preset -->
<div class="col-md-4">
<div class="card border-2 border-primary preset-card" data-preset="balanced" role="button" tabindex="0">
<div class="card-body">
<div class="d-flex justify-content-between align-items-start mb-2">
<h6 class="card-title mb-0"><?php esc_html_e( 'Balanced', 'wp-agentic-writer' ); ?></h6>
<span class="badge bg-primary">⭐ ~$0.14/article</span>
</div>
<div class="small text-muted">
<div><strong>Chat/Clarity/Planning:</strong> Gemini 2.5 Flash</div>
<div><strong>Writing/Refinement:</strong> Claude 3.5 Sonnet</div>
<div><strong>Image:</strong> Riverflow V2 Max</div>
</div>
</div>
</div>
</div>
<!-- Premium Preset -->
<div class="col-md-4">
<div class="card border-2 preset-card" data-preset="premium" role="button" tabindex="0">
<div class="card-body">
<div class="d-flex justify-content-between align-items-start mb-2">
<h6 class="card-title mb-0"><?php esc_html_e( 'Premium', 'wp-agentic-writer' ); ?></h6>
<span class="badge text-warning" style="color:rgba(var(--bs-warning-rgb),var(--bs-text-opacity))!important;" >✨ ~$0.31/article</span>
</div>
<div class="small text-muted">
<div><strong>Chat/Planning:</strong> Gemini 3 Flash Preview</div>
<div><strong>Clarity:</strong> Claude Sonnet 4</div>
<div><strong>Writing/Refinement:</strong> GPT-4.1</div>
<div><strong>Image:</strong> FLUX.2 max</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Individual Model Selectors -->
<div class="col-12">
<div class="card border-0 shadow-sm">
<div class="card-header bg-white border-bottom-0 pt-3">
<div class="d-flex align-items-center justify-content-between">
<div class="d-flex align-items-center">
<div>
<h5 class="card-title mb-1 d-flex align-items-center gap-2"><i class="bi bi-robot text-warning"></i><?php esc_html_e( 'AI Model Configuration', 'wp-agentic-writer' ); ?></h5>
<p class="text-muted small mb-0"><?php esc_html_e( '6 specialized models for optimal results. Use search to find models.', 'wp-agentic-writer' ); ?></p>
</div>
</div>
<button type="button" class="btn btn-outline-primary btn-sm" id="wpaw-refresh-models">
<span class="spinner-border spinner-border-sm d-none me-1" id="wpaw-models-spinner"></span>
<span class="dashicons dashicons-update me-1"></span>
<?php esc_html_e( 'Refresh Models', 'wp-agentic-writer' ); ?>
</button>
</div>
</div>
<div class="card-body">
<div id="wpaw-models-message" class="alert d-none mb-3"></div>
<div class="row g-4">
<!-- Chat Model -->
<div class="col-md-6">
<label for="chat_model" class="form-label fw-semibold">
<?php esc_html_e( 'Chat Model', 'wp-agentic-writer' ); ?>
<span class="badge bg-info-subtle text-info ms-2">Discussion</span>
</label>
<select id="chat_model" name="wp_agentic_writer_settings[chat_model]" class="form-select wpaw-select2-model" data-model-type="chat">
<option value="<?php echo esc_attr( $chat_model ); ?>"><?php echo esc_html( $chat_model ); ?></option>
</select>
<div class="form-text"><?php esc_html_e( 'Discussion, research, recommendations', 'wp-agentic-writer' ); ?></div>
</div>
<!-- Clarity Model -->
<div class="col-md-6">
<label for="clarity_model" class="form-label fw-semibold">
<?php esc_html_e( 'Clarity Model', 'wp-agentic-writer' ); ?>
<span class="badge bg-info-subtle text-info ms-2">Analysis</span>
</label>
<select id="clarity_model" name="wp_agentic_writer_settings[clarity_model]" class="form-select wpaw-select2-model" data-model-type="clarity">
<option value="<?php echo esc_attr( $clarity_model ); ?>"><?php echo esc_html( $clarity_model ); ?></option>
</select>
<div class="form-text"><?php esc_html_e( 'Prompt analysis, quiz generation', 'wp-agentic-writer' ); ?></div>
</div>
<!-- Planning Model -->
<div class="col-md-6">
<label for="planning_model" class="form-label fw-semibold">
<?php esc_html_e( 'Planning Model', 'wp-agentic-writer' ); ?>
<span class="badge bg-info-subtle text-info ms-2">Outline</span>
</label>
<select id="planning_model" name="wp_agentic_writer_settings[planning_model]" class="form-select wpaw-select2-model" data-model-type="planning">
<option value="<?php echo esc_attr( $planning_model ); ?>"><?php echo esc_html( $planning_model ); ?></option>
</select>
<div class="form-text"><?php esc_html_e( 'Article outline generation', 'wp-agentic-writer' ); ?></div>
</div>
<!-- Writing Model -->
<div class="col-md-6">
<label for="writing_model" class="form-label fw-semibold">
<?php esc_html_e( 'Writing Model', 'wp-agentic-writer' ); ?>
<span class="badge bg-primary ms-2">Main Writer</span>
</label>
<select id="writing_model" name="wp_agentic_writer_settings[writing_model]" class="form-select wpaw-select2-model" data-model-type="execution">
<option value="<?php echo esc_attr( $writing_model ); ?>"><?php echo esc_html( $writing_model ); ?></option>
</select>
<div class="form-text"><?php esc_html_e( 'Article draft generation (2-5k words)', 'wp-agentic-writer' ); ?></div>
</div>
<!-- Refinement Model -->
<div class="col-md-6">
<label for="refinement_model" class="form-label fw-semibold">
<?php esc_html_e( 'Refinement Model', 'wp-agentic-writer' ); ?>
<span class="badge bg-info text-info ms-2">Editing</span>
</label>
<select id="refinement_model" name="wp_agentic_writer_settings[refinement_model]" class="form-select wpaw-select2-model" data-model-type="execution">
<option value="<?php echo esc_attr( $refinement_model ); ?>"><?php echo esc_html( $refinement_model ); ?></option>
</select>
<div class="form-text"><?php esc_html_e( 'Paragraph edits, rewrites, polish', 'wp-agentic-writer' ); ?></div>
</div>
<!-- Image Model -->
<div class="col-md-6">
<label for="image_model" class="form-label fw-semibold">
<?php esc_html_e( 'Image Model', 'wp-agentic-writer' ); ?>
<span class="badge text-bg-warning ms-2">Visual</span>
</label>
<select id="image_model" name="wp_agentic_writer_settings[image_model]" class="form-select wpaw-select2-model" data-model-type="image">
<option value="<?php echo esc_attr( $image_model ); ?>"><?php echo esc_html( $image_model ); ?></option>
</select>
<div class="form-text"><?php esc_html_e( 'Image generation', 'wp-agentic-writer' ); ?></div>
</div>
</div>
<!-- Custom Models Section -->
<div class="mt-4 pt-4 border-top">
<div class="d-flex align-items-center justify-content-between mb-3">
<div>
<h6 class="mb-1 d-flex align-items-center gap-2">
<i class="bi bi-plus-circle text-success"></i>
<?php esc_html_e( 'Custom Models', 'wp-agentic-writer' ); ?>
</h6>
<p class="text-muted small mb-0"><?php esc_html_e( 'Add models not listed in API (e.g., black-forest-labs/flux.2-klein-4b). They work if you know the exact ID.', 'wp-agentic-writer' ); ?></p>
</div>
<button type="button" class="btn btn-outline-success btn-sm" id="wpaw-add-custom-model">
<i class="bi bi-plus"></i> <?php esc_html_e( 'Add Model', 'wp-agentic-writer' ); ?>
</button>
</div>
<div id="wpaw-custom-models-list">
<?php
if ( ! empty( $custom_models ) ) :
foreach ( $custom_models as $custom_model ) :
?>
<div class="custom-model-row d-flex gap-2 mb-2 align-items-center" data-saved="true">
<input type="text"
data-field="id"
value="<?php echo esc_attr( $custom_model['id'] ?? '' ); ?>"
class="form-control form-control-sm wpaw-custom-model-id"
placeholder="model-provider/model-name"
style="flex: 2;">
<input type="text"
data-field="name"
value="<?php echo esc_attr( $custom_model['name'] ?? '' ); ?>"
class="form-control form-control-sm wpaw-custom-model-name"
placeholder="Display Name (optional)"
style="flex: 2;">
<select data-field="type" class="form-select form-select-sm wpaw-custom-model-type" style="flex: 1;">
<option value="text" <?php selected( ( $custom_model['type'] ?? 'text' ), 'text' ); ?>><?php esc_html_e( 'Text', 'wp-agentic-writer' ); ?></option>
<option value="image" <?php selected( ( $custom_model['type'] ?? 'text' ), 'image' ); ?>><?php esc_html_e( 'Image', 'wp-agentic-writer' ); ?></option>
</select>
<button type="button" class="btn btn-outline-danger btn-sm wpaw-remove-custom-model">
<i class="bi bi-trash"></i>
</button>
</div>
<?php
endforeach;
endif;
?>
</div>
<template id="wpaw-custom-model-template">
<div class="custom-model-row d-flex gap-2 mb-2 align-items-center">
<input type="text"
data-field="id"
class="form-control form-control-sm wpaw-custom-model-id"
placeholder="model-provider/model-name"
style="flex: 2;">
<input type="text"
data-field="name"
class="form-control form-control-sm wpaw-custom-model-name"
placeholder="Display Name (optional)"
style="flex: 2;">
<select data-field="type" class="form-select form-select-sm wpaw-custom-model-type" style="flex: 1;">
<option value="text"><?php esc_html_e( 'Text', 'wp-agentic-writer' ); ?></option>
<option value="image"><?php esc_html_e( 'Image', 'wp-agentic-writer' ); ?></option>
</select>
<button type="button" class="btn btn-outline-danger btn-sm wpaw-remove-custom-model">
<i class="bi bi-trash"></i>
</button>
</div>
</template>
</div>
<!-- Cost Estimate Display -->
<div class="mt-4 p-4 bg-dark rounded-3">
<div class="d-flex align-items-center justify-content-between">
<div>
<h6 class="mb-1"><?php esc_html_e( 'Estimated Cost Per Article', 'wp-agentic-writer' ); ?></h6>
<p class="text-muted small mb-0"><?php esc_html_e( 'Based on ~2K planning tokens, ~4K execution tokens, and 1 image.', 'wp-agentic-writer' ); ?></p>
</div>
<div class="text-end">
<div id="wpaw-cost-estimate" class="fs-3 fw-bold text-primary">~$0.00</div>
<div class="text-muted small"><?php esc_html_e( 'per article', 'wp-agentic-writer' ); ?></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

View File

@@ -0,0 +1,194 @@
<?php
/**
* Settings V2 layout — Stitch rebuild.
*
* @package WP_Agentic_Writer
* @var array $view_data Prepared view data from class-settings-v2.php.
*/
if (!defined("ABSPATH")) {
exit();
}
// phpcs:ignore WordPress.PHP.DontExtract.extract_extract -- View templates are intentionally passed prepared variables.
extract($view_data);
$api_connected = !empty($api_key);
$models_ready = !empty($planning_model) && !empty($writing_model);
$budget_percent_safe = min(100, (float) $budget_percent);
$user_agent = isset($_SERVER["HTTP_USER_AGENT"])
? sanitize_text_field(wp_unslash($_SERVER["HTTP_USER_AGENT"]))
: "";
$cmd_key = false !== strpos($user_agent, "Mac OS") ? "" : "Ctrl";
$settings_tabs = [
"general" => ["General", "6"],
"models" => ["OpenRouter", "6"],
"local-backend" => ["Custom Router", "3"],
"tools" => ["Tools", "1"],
"memanto" => ["MEMANTO", "3"],
"cost-log" => ["Cost Log", "2"],
"guide" => ["Model Guide", "3"],
];
?>
<div class="wrap wpaw2-settings">
<script>
// Intercept WP "Settings saved" admin notice → use our Agentic toast
document.addEventListener('DOMContentLoaded', function() {
var wpNotice = document.querySelector('#setting-error-settings_updated, .notice.settings-error');
if (wpNotice) {
var msg = wpNotice.querySelector('p');
var text = msg ? msg.textContent.replace('Settings saved.', 'Settings saved').trim() : 'Settings saved';
wpNotice.style.display = 'none';
// Delegate to existing toast system
var toast = document.getElementById('wpaw2-toast');
var body = document.getElementById('wpaw2-toast-message');
if (toast && body) {
body.textContent = text;
toast.className = 'toast show toast-success';
clearTimeout(toast._timer);
toast._timer = setTimeout(function() { toast.classList.remove('show'); }, 2600);
}
}
});
</script>
<div class="main">
<header class="admin-top">
<div class="crumb"><?php esc_html_e(
"Agentic Writer",
"wp-agentic-writer",
); ?> / <strong id="wpaw2-crumb-tab"><?php esc_html_e(
"General",
"wp-agentic-writer",
); ?></strong></div>
<div class="top-actions">
<button type="button" class="btn btn-small" data-aw2-tab="guide"><?php esc_html_e(
"Open Guide",
"wp-agentic-writer",
); ?></button>
<button type="button" class="btn btn-small btn-danger" id="wpaw-reset-settings"><?php esc_html_e(
"Reset Defaults",
"wp-agentic-writer",
); ?></button>
<button type="submit" form="wpaw2-settings-form" class="btn btn-primary btn-small"><?php esc_html_e(
"Save Settings",
"wp-agentic-writer",
); ?></button>
</div>
</header>
<main class="page">
<section class="hero">
<div class="hero-card">
<p class="eyebrow"><?php esc_html_e(
"Control center",
"wp-agentic-writer",
); ?></p>
<h1><?php esc_html_e(
"Configure your agentic writing workflow.",
"wp-agentic-writer",
); ?></h1>
<p class="hero-copy"><?php esc_html_e(
"Manage providers, model routing, memory, cost controls, and custom endpoint integrations from one lightweight settings interface.",
"wp-agentic-writer",
); ?></p>
</div>
<div class="status-panel">
<div class="workflow-step"><span class="step-dot">1</span><span class="step-label"><?php esc_html_e(
"OpenRouter",
"wp-agentic-writer",
); ?></span><span class="status <?php echo esc_attr(
$api_connected ? "connected" : "warn",
); ?>"><?php echo $api_connected
? esc_html__("Connected", "wp-agentic-writer")
: esc_html__("Missing key", "wp-agentic-writer"); ?></span></div>
<div class="workflow-step"><span class="step-dot">2</span><span class="step-label"><?php esc_html_e(
"Models",
"wp-agentic-writer",
); ?></span><span class="status <?php echo esc_attr(
$models_ready ? "connected" : "warn",
); ?>"><?php echo $models_ready
? esc_html__("Ready", "wp-agentic-writer")
: esc_html__("Review", "wp-agentic-writer"); ?></span></div>
<div class="workflow-step"><span class="step-dot">3</span><span class="step-label"><?php esc_html_e(
"Budget",
"wp-agentic-writer",
); ?></span><span class="status <?php echo esc_attr(
"danger" === $budget_status
? "error"
: ("warning" === $budget_status
? "warn"
: "connected"),
); ?>"><?php echo esc_html(
number_format_i18n($budget_percent_safe, 1),
); ?>%</span></div>
</div>
</section>
<form method="post" action="options.php" id="wpaw2-settings-form">
<?php settings_fields("wp_agentic_writer_settings"); ?>
<section class="tabs-wrap">
<aside class="tab-sidebar" aria-label="Settings sections">
<div class="tab-group">
<div class="tab-group-title"><?php esc_html_e(
"Setup",
"wp-agentic-writer",
); ?></div>
<?php foreach (
["general", "models", "local-backend", "tools", "memanto"]
as $tab_key
): ?>
<button type="button" class="tab-btn" data-aw2-tab="<?php echo esc_attr(
$tab_key,
); ?>" data-label="<?php echo esc_attr(
$settings_tabs[$tab_key][0],
); ?>" aria-selected="<?php echo "general" === $tab_key
? "true"
: "false"; ?>"><span><?php echo esc_html(
$settings_tabs[$tab_key][0],
); ?></span><span class="tab-count"><?php echo esc_html(
$settings_tabs[$tab_key][1],
); ?></span></button>
<?php endforeach; ?>
</div>
<div class="tab-group">
<div class="tab-group-title"><?php esc_html_e(
"Reference",
"wp-agentic-writer",
); ?></div>
<?php foreach (["cost-log", "guide"] as $tab_key): ?>
<button type="button" class="tab-btn" data-aw2-tab="<?php echo esc_attr(
$tab_key,
); ?>" data-label="<?php echo esc_attr(
$settings_tabs[$tab_key][0],
); ?>" aria-selected="false"><span><?php echo esc_html(
$settings_tabs[$tab_key][0],
); ?></span><span class="tab-count"><?php echo esc_html(
$settings_tabs[$tab_key][1],
); ?></span></button>
<?php endforeach; ?>
</div>
</aside>
<div>
<section class="tab-panel active" id="general"><?php require WP_AGENTIC_WRITER_DIR .
"views/settings-v2/tab-general.php"; ?></section>
<section class="tab-panel" id="models"><?php require WP_AGENTIC_WRITER_DIR .
"views/settings-v2/tab-models.php"; ?></section>
<section class="tab-panel" id="local-backend"><?php require WP_AGENTIC_WRITER_DIR .
"views/settings-v2/tab-local-backend.php"; ?></section>
<section class="tab-panel" id="tools"><?php require WP_AGENTIC_WRITER_DIR .
"views/settings-v2/tab-tools.php"; ?></section>
<section class="tab-panel" id="memanto"><?php require WP_AGENTIC_WRITER_DIR .
"views/settings-v2/tab-memanto.php"; ?></section>
<section class="tab-panel" id="cost-log"><?php require WP_AGENTIC_WRITER_DIR .
"views/settings-v2/tab-cost-log.php"; ?></section>
<section class="tab-panel" id="guide"><?php require WP_AGENTIC_WRITER_DIR .
"views/settings-v2/tab-guide.php"; ?></section>
</div>
</section>
</form>
</main>
</div>
<div class="toast" id="wpaw2-toast" role="status" aria-live="polite"><button type="button" class="btn btn-small" id="wpaw2-toast-close" style="float:right">×</button><span id="wpaw2-toast-message"></span></div>
</div>

1332
views/settings-v2/style.css Normal file

File diff suppressed because it is too large Load Diff

View File

@@ -0,0 +1,66 @@
<?php
/**
* Settings V2: Cost Log.
*
* @package WP_Agentic_Writer
*/
if (!defined("ABSPATH")) {
exit();
} ?>
<div class="section-head"><div><p class="eyebrow"><?php esc_html_e(
"Spend visibility",
"wp-agentic-writer",
); ?></p><h2><?php esc_html_e(
"OpenRouter cost log",
"wp-agentic-writer",
); ?></h2><p><?php esc_html_e(
"Review usage, monthly spend, and per-post OpenRouter costs.",
"wp-agentic-writer",
); ?></p></div><button type="button" class="btn btn-small" id="wpaw-export-csv"><?php esc_html_e(
"Export CSV",
"wp-agentic-writer",
); ?></button></div>
<div class="panel"><div class="panel-head"><div class="panel-title"><h3><?php esc_html_e(
"Monthly summary",
"wp-agentic-writer",
); ?></h3><p><?php esc_html_e(
"Current month usage from the cost tracker.",
"wp-agentic-writer",
); ?></p></div></div><div class="panel-body grid-3"><div class="metric-card"><div class="metric-value">$<?php echo esc_html(
number_format_i18n($monthly_used, 2),
); ?></div><div class="metric-label"><?php esc_html_e(
"Used",
"wp-agentic-writer",
); ?></div></div><div class="metric-card"><div class="metric-value">$<?php echo esc_html(
number_format_i18n($monthly_budget, 2),
); ?></div><div class="metric-label"><?php esc_html_e(
"Budget",
"wp-agentic-writer",
); ?></div></div><div class="metric-card"><div class="metric-value"><?php echo esc_html(
number_format_i18n($budget_percent, 1),
); ?>%</div><div class="progress"><span style="width: <?php echo esc_attr(
min(100, $budget_percent),
); ?>%"></span></div><div class="metric-label"><?php esc_html_e(
"Budget usage",
"wp-agentic-writer",
); ?></div></div></div></div>
<div class="panel"><div class="panel-head"><div class="panel-title"><h3><?php esc_html_e(
"Recent usage",
"wp-agentic-writer",
); ?></h3><p><?php esc_html_e(
"Expand each post to see action-level calls and costs.",
"wp-agentic-writer",
); ?></p></div></div><div class="panel-body"><table class="ds-table" id="wpaw-cost-log-table"><thead><tr><th><?php esc_html_e(
"Post",
"wp-agentic-writer",
); ?></th><th><?php esc_html_e(
"Actions / calls",
"wp-agentic-writer",
); ?></th><th><?php esc_html_e(
"Total cost",
"wp-agentic-writer",
); ?></th></tr></thead><tbody id="wpaw-cost-log-tbody"><tr><td colspan="3"><?php esc_html_e(
"Cost data will appear after OpenRouter generations.",
"wp-agentic-writer",
); ?></td></tr></tbody></table></div></div>

View File

@@ -0,0 +1,123 @@
<?php
/**
* Settings V2: General.
*
* @package WP_Agentic_Writer
*/
if (!defined("ABSPATH")) {
exit();
} ?>
<div class="section-head">
<div>
<p class="eyebrow"><?php esc_html_e("Foundation", "wp-agentic-writer"); ?></p>
<h2><?php esc_html_e("General settings", "wp-agentic-writer"); ?></h2>
<p><?php esc_html_e(
"Manage your agent's core identity, clarification limits, and language preferences.",
"wp-agentic-writer",
); ?></p>
</div>
</div>
<div class="panel">
<div class="panel-head">
<div class="panel-title">
<h3><?php esc_html_e(
"Global Context & Brand Voice",
"wp-agentic-writer",
); ?></h3>
<p><?php esc_html_e(
"Set unbreakable rules, tone, and identity for the AI. This context is injected into every single agentic request.",
"wp-agentic-writer",
); ?></p>
</div>
</div>
<div class="panel-body">
<div class="field" style="width: 100%;">
<textarea class="field-control" id="global_context" name="wp_agentic_writer_settings[global_context]" rows="5" placeholder="<?php esc_attr_e(
"e.g., You are a senior attorney writing for a legal blog. Never give direct legal advice. Always use British English. Avoid mentioning competitors.",
"wp-agentic-writer",
); ?>" style="width: 100%; font-family: ui-monospace, SFMono-Regular, monospace; resize: vertical;"><?php echo esc_textarea(
$global_context ?? "",
); ?></textarea>
<p class="help" style="margin-top: 8px;">
<?php esc_html_e(
"Think of this as the DNA of your agent. While Memanto learns from user feedback organically, this field defines hard guardrails that the AI must always follow.",
"wp-agentic-writer",
); ?>
</p>
</div>
</div>
</div>
<div class="panel">
<div class="panel-head"><div class="panel-title"><h3><?php esc_html_e(
"Research & clarification",
"wp-agentic-writer",
); ?></h3><p><?php esc_html_e(
"Control question generation.",
"wp-agentic-writer",
); ?></p></div></div>
<div class="panel-body">
<label class="switch-row" style="margin-top:0px"><input type="checkbox" name="wp_agentic_writer_settings[enable_clarification_quiz]" value="1" <?php checked(
$enable_clarification_quiz,
); ?>><span class="switch"></span><span><?php esc_html_e(
"Ask clarification quiz before writing",
"wp-agentic-writer",
); ?></span></label>
</div>
</div>
<div class="panel">
<div class="panel-head"><div class="panel-title"><h3><?php esc_html_e(
"Language preferences",
"wp-agentic-writer",
); ?></h3><p><?php esc_html_e(
"Preferred writing languages and chat memory limits.",
"wp-agentic-writer",
); ?></p></div></div>
<div class="panel-body grid-2">
<div class="field"><label for="chat_history_limit"><?php esc_html_e(
"Chat history limit",
"wp-agentic-writer",
); ?></label><input class="field-control" type="number" min="1" id="chat_history_limit" name="wp_agentic_writer_settings[chat_history_limit]" value="<?php echo esc_attr(
$chat_history_limit,
); ?>"></div>
<div class="field"><label for="clarity_confidence_threshold"><?php esc_html_e(
"Clarity threshold",
"wp-agentic-writer",
); ?></label><select class="field-control" id="clarity_confidence_threshold" name="wp_agentic_writer_settings[clarity_confidence_threshold]"><option value="0.4" <?php selected(
$clarity_confidence_threshold,
"0.4",
); ?>>Relaxed</option><option value="0.6" <?php selected(
$clarity_confidence_threshold,
"0.6",
); ?>>Balanced</option><option value="0.8" <?php selected(
$clarity_confidence_threshold,
"0.8",
); ?>>Strict</option></select></div>
<div class="field language-field"><label for="preferred_languages"><?php esc_html_e(
"Preferred languages",
"wp-agentic-writer",
); ?></label><select class="field-control" id="preferred_languages" name="wp_agentic_writer_settings[preferred_languages][]" multiple><?php foreach (
(array) $available_languages
as $language_value => $language_label
): ?><option value="<?php echo esc_attr($language_value); ?>" <?php selected(
in_array($language_value, (array) $preferred_languages, true),
); ?>><?php echo esc_html(
$language_label,
); ?></option><?php endforeach; ?></select><p class="help"><?php esc_html_e(
"These are passed to the editor language controls.",
"wp-agentic-writer",
); ?></p></div>
<div class="field"><label for="custom_languages"><?php esc_html_e(
"Custom languages",
"wp-agentic-writer",
); ?></label><input class="field-control" type="text" id="custom_languages" name="wp_agentic_writer_settings[custom_languages][]" value="<?php echo esc_attr(
implode(", ", (array) $custom_languages),
); ?>" placeholder="Javanese, Sundanese"><p class="help"><?php esc_html_e(
"Separate multiple custom languages with commas.",
"wp-agentic-writer",
); ?></p></div>
</div>
</div>

View File

@@ -0,0 +1,246 @@
<?php
/**
* Settings V2: Guide.
*
* @package WP_Agentic_Writer
*/
if (!defined("ABSPATH")) {
exit();
} ?>
<div class="section-head"><div><p class="eyebrow"><?php esc_html_e(
"Reference",
"wp-agentic-writer",
); ?></p><h2><?php esc_html_e(
"Model guide",
"wp-agentic-writer",
); ?></h2><p><?php esc_html_e(
"Understand which model role is used for each feature and estimate costs.",
"wp-agentic-writer",
); ?></p></div></div>
<div class="panel">
<div class="panel-head"><div class="panel-title"><h3><?php esc_html_e(
"Tasks and model roles",
"wp-agentic-writer",
); ?></h3><p><?php esc_html_e(
"Each workflow stage uses a dedicated model.",
"wp-agentic-writer",
); ?></p></div></div>
<div class="panel-body">
<table class="ds-table">
<thead><tr>
<th><?php esc_html_e("Task", "wp-agentic-writer"); ?></th>
<th><?php esc_html_e("Model role", "wp-agentic-writer"); ?></th>
<th><?php esc_html_e("Est. cost", "wp-agentic-writer"); ?></th>
<th><?php esc_html_e("Purpose", "wp-agentic-writer"); ?></th>
</tr></thead>
<tbody>
<tr>
<td><strong><?php esc_html_e("Planning", "wp-agentic-writer"); ?></strong></td>
<td><span class="chip on"><?php esc_html_e(
"Planning",
"wp-agentic-writer",
); ?></span></td>
<td class="guide-cost">~$0.001</td>
<td><?php esc_html_e(
"Creates article outline with sections and structure.",
"wp-agentic-writer",
); ?></td>
</tr>
<tr>
<td><strong><?php esc_html_e(
"Clarity Check",
"wp-agentic-writer",
); ?></strong></td>
<td><span class="chip on"><?php esc_html_e(
"Clarity",
"wp-agentic-writer",
); ?></span></td>
<td class="guide-cost">~$0.0005</td>
<td><?php esc_html_e(
"Analyzes your prompt and asks clarifying questions.",
"wp-agentic-writer",
); ?></td>
</tr>
<tr class="ds-table-highlight">
<td><strong><?php esc_html_e("Writing", "wp-agentic-writer"); ?></strong></td>
<td><span class="chip on"><?php esc_html_e(
"Writing",
"wp-agentic-writer",
); ?></span></td>
<td class="guide-cost">~$0.050.15</td>
<td><?php esc_html_e(
"Generates full article content section by section.",
"wp-agentic-writer",
); ?></td>
</tr>
<tr>
<td><strong><?php esc_html_e("Chat", "wp-agentic-writer"); ?></strong></td>
<td><span class="chip on"><?php esc_html_e(
"Chat",
"wp-agentic-writer",
); ?></span></td>
<td class="guide-cost">~$0.001</td>
<td><?php esc_html_e(
"Answers questions and provides quick assistance.",
"wp-agentic-writer",
); ?></td>
</tr>
<tr>
<td><strong><?php esc_html_e(
"Block Refinement",
"wp-agentic-writer",
); ?></strong></td>
<td><span class="chip on"><?php esc_html_e(
"Refinement",
"wp-agentic-writer",
); ?></span></td>
<td class="guide-cost">~$0.010.03</td>
<td><?php esc_html_e(
"Improves or rewrites selected content blocks.",
"wp-agentic-writer",
); ?></td>
</tr>
<tr>
<td><strong><?php esc_html_e(
"Image Generation",
"wp-agentic-writer",
); ?></strong></td>
<td><span class="chip on"><?php esc_html_e(
"Image",
"wp-agentic-writer",
); ?></span></td>
<td class="guide-cost">~$0.0030.04</td>
<td><?php esc_html_e(
"Creates images for articles.",
"wp-agentic-writer",
); ?></td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="panel">
<div class="panel-head"><div class="panel-title"><h3><?php esc_html_e(
"Recommended models",
"wp-agentic-writer",
); ?></h3><p><?php esc_html_e(
"Best models for each purpose based on quality and cost.",
"wp-agentic-writer",
); ?></p></div></div>
<div class="panel-body">
<table class="ds-table">
<thead><tr>
<th><?php esc_html_e("Model", "wp-agentic-writer"); ?></th>
<th><?php esc_html_e("Best for", "wp-agentic-writer"); ?></th>
<th><?php esc_html_e("Cost / 1M tokens", "wp-agentic-writer"); ?></th>
<th><?php esc_html_e("Notes", "wp-agentic-writer"); ?></th>
</tr></thead>
<tbody>
<tr>
<td><strong>Gemini 2.5 Flash</strong></td>
<td><?php esc_html_e("Chat, Clarity, Planning", "wp-agentic-writer"); ?></td>
<td class="guide-cost">$0.15 / $0.60</td>
<td>⭐ <?php esc_html_e(
"Best balanced option. Fast reasoning.",
"wp-agentic-writer",
); ?></td>
</tr>
<tr>
<td><strong>Claude 3.5 Sonnet</strong></td>
<td><?php esc_html_e("Writing, Refinement", "wp-agentic-writer"); ?></td>
<td class="guide-cost">$3.00 / $15.00</td>
<td>⭐ <?php esc_html_e(
"Best quality writing. Recommended.",
"wp-agentic-writer",
); ?></td>
</tr>
<tr>
<td><strong>GPT-4.1</strong></td>
<td><?php esc_html_e(
"Writing, Refinement (Premium)",
"wp-agentic-writer",
); ?></td>
<td class="guide-cost">$2.00 / $8.00</td>
<td>🏆 <?php esc_html_e(
"Premium option. Excellent instruction following.",
"wp-agentic-writer",
); ?></td>
</tr>
<tr>
<td><strong>GPT-4o</strong></td>
<td><?php esc_html_e("Image Generation", "wp-agentic-writer"); ?></td>
<td class="guide-cost">$2.50 / $10.00</td>
<td>⭐ <?php esc_html_e(
"Generates article images from text prompts.",
"wp-agentic-writer",
); ?></td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="panel">
<div class="panel-head"><div class="panel-title"><h3><?php esc_html_e(
"Cost examples",
"wp-agentic-writer",
); ?></h3><p><?php esc_html_e(
"Real-world cost estimates for common tasks.",
"wp-agentic-writer",
); ?></p></div></div>
<div class="panel-body">
<div class="grid-3">
<div class="metric-card guide-cost-card">
<h3><?php esc_html_e("Single article (Balanced)", "wp-agentic-writer"); ?></h3>
<ul class="guide-cost-list">
<li><?php esc_html_e("Clarity Check", "wp-agentic-writer"); ?>: ~$0.001</li>
<li><?php esc_html_e("Planning", "wp-agentic-writer"); ?>: ~$0.001</li>
<li><?php esc_html_e(
"Writing (5 sections)",
"wp-agentic-writer",
); ?>: ~$0.10</li>
<li><?php esc_html_e("1 Image", "wp-agentic-writer"); ?>: ~$0.003</li>
</ul>
<div class="guide-cost-total">
<span><?php esc_html_e("Total", "wp-agentic-writer"); ?></span>
<strong>~$0.100.15</strong>
</div>
</div>
<div class="metric-card guide-cost-card">
<h3><?php esc_html_e("10 articles / month", "wp-agentic-writer"); ?></h3>
<ul class="guide-cost-list">
<li><?php esc_html_e('10 articles × $0.15', "wp-agentic-writer"); ?></li>
<li><?php esc_html_e(
"Some chat interactions",
"wp-agentic-writer",
); ?>: ~$0.05</li>
<li><?php esc_html_e("Refinements", "wp-agentic-writer"); ?>: ~$0.20</li>
</ul>
<div class="guide-cost-total">
<span><?php esc_html_e("Total", "wp-agentic-writer"); ?></span>
<strong>~$1.502.00</strong>
</div>
</div>
<div class="metric-card guide-cost-card">
<h3><?php esc_html_e("With web search", "wp-agentic-writer"); ?></h3>
<ul class="guide-cost-list">
<li><?php esc_html_e(
'Add ~$0.02 per search request',
"wp-agentic-writer",
); ?></li>
<li><?php esc_html_e(
"Typical: 12 searches per article",
"wp-agentic-writer",
); ?></li>
</ul>
<div class="guide-cost-total">
<span><?php esc_html_e("Extra", "wp-agentic-writer"); ?></span>
<strong class="guide-cost-warn">~$0.020.04</strong>
</div>
</div>
</div>
</div>
</div>

View File

@@ -0,0 +1,298 @@
<?php
/**
* Settings V2: Custom Endpoint.
*
* @package WP_Agentic_Writer
*/
if (!defined("ABSPATH")) {
exit();
} ?>
<div class="section-head">
<div>
<p class="eyebrow"><?php esc_html_e(
"Custom API Router",
"wp-agentic-writer",
); ?></p>
<h2><?php esc_html_e("Custom Router", "wp-agentic-writer"); ?></h2>
<p><?php esc_html_e(
"Connect any OpenAI-compatible API — Ollama, LM Studio, llama.cpp, vLLM, or your own proxy.",
"wp-agentic-writer",
); ?></p>
</div>
<span class="status <?php echo !empty($local_backend_url)
? "connected"
: "warn"; ?>">
<?php echo !empty($local_backend_url)
? esc_html__("Configured", "wp-agentic-writer")
: esc_html__("Optional", "wp-agentic-writer"); ?>
</span>
</div>
<div class="subtab-nav" role="tablist">
<button type="button" class="subtab-btn" role="tab" aria-selected="true" data-aw2-subtab-target="cr-connection">Connection</button>
<button type="button" class="subtab-btn" role="tab" aria-selected="false" data-aw2-subtab-target="cr-models">Models</button>
</div>
<!-- =======================
TAB: CONNECTION
======================= -->
<div class="subtab-panel active" id="cr-connection">
<!-- Connection panel -->
<div class="panel">
<div class="panel-head">
<div class="panel-title">
<h3><?php esc_html_e("Connection", "wp-agentic-writer"); ?></h3>
<p><?php esc_html_e(
"Enter the base URL and API key for your OpenAI-compatible endpoint.",
"wp-agentic-writer",
); ?></p>
</div>
<button type="button" class="btn btn-small" id="wpaw-test-local-backend">
<?php esc_html_e("Test connection", "wp-agentic-writer"); ?>
</button>
</div>
<div class="panel-body grid-2">
<div class="field">
<label><?php esc_html_e("Base URL", "wp-agentic-writer"); ?></label>
<input class="field-control" type="url" id="local_backend_url"
name="wp_agentic_writer_settings[local_backend_url]"
value="<?php echo esc_attr($local_backend_url); ?>"
placeholder="https://api.example.com">
</div>
<div class="field">
<label><?php esc_html_e("API Key", "wp-agentic-writer"); ?></label>
<input class="field-control" type="text" id="local_backend_key"
name="wp_agentic_writer_settings[local_backend_key]"
value="<?php echo esc_attr($local_backend_key); ?>"
placeholder="sk-...">
</div>
</div>
</div>
<!-- Image Connection panel -->
<div class="panel">
<div class="panel-head">
<div class="panel-title">
<h3><?php esc_html_e(
"Image Generation Connection",
"wp-agentic-writer",
); ?></h3>
<p><?php esc_html_e(
"When enabled, image generation tasks will be sent to this endpoint. If disabled, images will be safely generated via OpenRouter.",
"wp-agentic-writer",
); ?></p>
</div>
<div style="display: flex; gap: 10px; align-items: center;">
<button type="button" class="btn btn-small" id="wpaw-test-local-image" style="white-space: nowrap; <?php echo empty(
$local_backend_image_enabled
)
? "display:none;"
: ""; ?>">
<?php esc_html_e("Test connection", "wp-agentic-writer"); ?>
</button>
<label class="switch-row" style="margin:0">
<input type="checkbox" id="wpaw-ce-image-enabled"
name="wp_agentic_writer_settings[local_backend_image_enabled]"
value="1" <?php checked(!empty($local_backend_image_enabled)); ?>>
<span class="switch"></span>
</label>
</div>
</div>
<div class="panel-body grid-2" id="wpaw-ce-image-panel" <?php echo empty(
$local_backend_image_enabled
)
? "hidden"
: ""; ?>>
<div class="field">
<label><?php esc_html_e(
"Image Base URL (Optional)",
"wp-agentic-writer",
); ?></label>
<input class="field-control" type="url" id="local_backend_image_url"
name="wp_agentic_writer_settings[local_backend_image_url]"
value="<?php echo esc_attr($local_backend_image_url); ?>"
placeholder="https://api.images.example.com">
</div>
<div class="field">
<label><?php esc_html_e(
"Image API Key (Optional)",
"wp-agentic-writer",
); ?></label>
<input class="field-control" type="text" id="local_backend_image_key"
name="wp_agentic_writer_settings[local_backend_image_key]"
value="<?php echo esc_attr($local_backend_image_key); ?>"
placeholder="sk-...">
</div>
</div>
</div>
<!-- Hidden legacy field — keeps backward compat; value auto-synced by JS from per-task models -->
<input type="hidden" id="local_backend_model"
name="wp_agentic_writer_settings[local_backend_model]"
value="<?php echo esc_attr($local_backend_model); ?>">
</div>
<!-- =======================
TAB: TOOLS
======================= -->
<div class="subtab-panel" id="cr-tools">
<!-- Brave Search Panel for Local Backend -->
<div class="panel">
<div class="panel-head">
<div class="panel-title">
<h3><?php esc_html_e(
"Brave Search (Web Research)",
"wp-agentic-writer",
); ?></h3>
<p><?php esc_html_e(
"Local endpoints cannot search the web natively. Provide a Brave Search API key (free tier allows 2,000 req/mo) so WordPress can fetch web context before prompting your model.",
"wp-agentic-writer",
); ?></p>
</div>
</div>
<div class="panel-body grid-2">
<div class="field">
<label for="brave_search_api_key"><?php esc_html_e(
"Brave Search API key",
"wp-agentic-writer",
); ?></label>
<div class="password-row">
<input class="field-control" type="password" id="brave_search_api_key" name="wp_agentic_writer_settings[brave_search_api_key]" value="<?php echo esc_attr(
$brave_search_api_key,
); ?>">
<button type="button" class="btn" data-aw2-toggle-password="#brave_search_api_key"><?php esc_html_e(
"Show",
"wp-agentic-writer",
); ?></button>
</div>
</div>
<div class="field">
<label for="search_depth"><?php esc_html_e(
"Search depth",
"wp-agentic-writer",
); ?></label>
<select class="field-control" id="search_depth" name="wp_agentic_writer_settings[search_depth]">
<option value="light" <?php selected($search_depth, "light"); ?>>Light</option>
<option value="medium" <?php selected(
$search_depth,
"medium",
); ?>>Medium</option>
<option value="deep" <?php selected($search_depth, "deep"); ?>>Deep</option>
</select>
</div>
</div>
</div>
</div>
<!-- =======================
TAB: MODELS
======================= -->
<div class="subtab-panel" id="cr-models">
<!-- Enable toggle + Task routing panel -->
<div class="panel">
<div class="panel-head">
<div class="panel-title">
<h3><?php esc_html_e("Task routing", "wp-agentic-writer"); ?></h3>
<p><?php esc_html_e(
"Activate Custom Router, then assign a model code per task.",
"wp-agentic-writer",
); ?></p>
</div>
<label class="switch-row" style="margin:0">
<input type="checkbox" id="wpaw-ce-enabled"
name="wp_agentic_writer_settings[local_backend_enabled]"
value="1" <?php checked($local_backend_enabled); ?>>
<span class="switch"></span>
</label>
</div>
<div class="panel-body" id="wpaw-ce-routing" <?php echo $local_backend_enabled
? ""
: "hidden"; ?>>
<table class="ds-table">
<thead>
<tr>
<th><?php esc_html_e("Task", "wp-agentic-writer"); ?></th>
<th><?php esc_html_e("Model Code", "wp-agentic-writer"); ?></th>
</tr>
</thead>
<tbody>
<?php foreach (
["chat", "clarity", "planning", "writing", "refinement", "image"]
as $task_key
):
$task_model = $local_backend_models[$task_key] ?? "";
$row_style = "";
if ($task_key === "image" && empty($local_backend_image_enabled)) {
$row_style = "display: none;";
}
?>
<tr id="wpaw-ce-row-<?php echo esc_attr(
$task_key,
); ?>" style="<?php echo esc_attr($row_style); ?>">
<td style="vertical-align:middle"><?php echo esc_html(
ucfirst($task_key),
); ?></td>
<td>
<input class="field-control wpaw-ce-model" type="text"
name="wp_agentic_writer_settings[local_backend_models][<?php echo esc_attr(
$task_key,
); ?>]"
value="<?php echo esc_attr($task_model); ?>"
placeholder="gpt-4o-mini"
data-task="<?php echo esc_attr($task_key); ?>">
</td>
</tr>
<?php
endforeach; ?>
</tbody>
</table>
<label class="switch-row" style="margin-top:14px">
<input type="checkbox"
name="wp_agentic_writer_settings[allow_openrouter_fallback]"
value="1" <?php checked($allow_openrouter_fallback); ?>>
<span class="switch"></span>
<span><?php esc_html_e(
"Allow OpenRouter fallback when custom endpoint is unreachable",
"wp-agentic-writer",
); ?></span>
</label>
</div>
</div>
</div>
<script>
(function(){
var toggle = document.getElementById('wpaw-ce-enabled');
var panel = document.getElementById('wpaw-ce-routing');
if (toggle && panel) {
toggle.addEventListener('change', function(){
panel.hidden = !this.checked;
});
}
var imgToggle = document.getElementById('wpaw-ce-image-enabled');
var imgPanel = document.getElementById('wpaw-ce-image-panel');
var imgTestBtn = document.getElementById('wpaw-test-local-image');
var imgRow = document.getElementById('wpaw-ce-row-image');
if (imgToggle && imgPanel) {
imgToggle.addEventListener('change', function(){
imgPanel.hidden = !this.checked;
if (imgTestBtn) {
imgTestBtn.style.display = this.checked ? 'inline-block' : 'none';
}
if (imgRow) {
imgRow.style.display = this.checked ? '' : 'none';
}
});
}
})();
</script>

View File

@@ -0,0 +1,108 @@
<?php
/**
* Settings V2: MEMANTO.
*
* @package WP_Agentic_Writer
*/
if (!defined("ABSPATH")) {
exit();
} ?>
<div class="section-head"><div><p class="eyebrow"><?php esc_html_e(
"Memory",
"wp-agentic-writer",
); ?></p><h2><?php esc_html_e(
"MEMANTO Context Keeper",
"wp-agentic-writer",
); ?></h2><p><?php esc_html_e(
"Optional persistent memory for agentic writing sessions.",
"wp-agentic-writer",
); ?></p></div><span class="status <?php echo $memanto_enabled
? "connected"
: "warn"; ?>"><?php echo $memanto_enabled
? esc_html__("Enabled", "wp-agentic-writer")
: esc_html__("Optional", "wp-agentic-writer"); ?></span></div>
<div class="panel">
<div class="panel-head"><div class="panel-title"><h3><?php esc_html_e(
"Integration",
"wp-agentic-writer",
); ?></h3><p><?php esc_html_e(
"Connect your MEMANTO instance and Moorcheh key.",
"wp-agentic-writer",
); ?></p></div><button type="button" class="btn btn-small" id="wpaw-test-memanto"><?php esc_html_e(
"Test connection",
"wp-agentic-writer",
); ?></button></div>
<div class="panel-body">
<label class="switch-row"><input type="checkbox" name="wp_agentic_writer_settings[memanto_enabled]" value="1" <?php checked(
$memanto_enabled,
); ?>><span class="switch"></span><span><?php esc_html_e(
"Enable MEMANTO",
"wp-agentic-writer",
); ?></span></label>
<div class="grid-2" style="margin-top:14px">
<div class="field">
<label for="memanto_url"><?php esc_html_e(
"Instance URL",
"wp-agentic-writer",
); ?></label>
<input class="field-control" type="url" id="memanto_url" name="wp_agentic_writer_settings[memanto_url]" value="<?php echo esc_attr(
$memanto_url,
); ?>" placeholder="https://your-memanto-instance.com">
</div>
<div class="field">
<label for="memanto_license_key"><?php esc_html_e(
"Instance license key",
"wp-agentic-writer",
); ?></label>
<input class="field-control" type="text" id="memanto_license_key" name="wp_agentic_writer_settings[memanto_license_key]" value="<?php echo esc_attr(
$memanto_license_key,
); ?>">
</div>
</div>
<div class="field" style="margin-top:14px">
<label for="memanto_moorcheh_key"><?php esc_html_e(
"Moorcheh API key",
"wp-agentic-writer",
); ?></label>
<div class="password-row">
<input class="field-control" type="password" id="memanto_moorcheh_key" name="wp_agentic_writer_settings[memanto_moorcheh_key]" value="<?php echo esc_attr(
$memanto_moorcheh_key,
); ?>">
<button type="button" class="btn" data-aw2-toggle-password="#memanto_moorcheh_key"><?php esc_html_e(
"Show",
"wp-agentic-writer",
); ?></button>
</div>
</div>
</div>
</div>
<div class="panel"><div class="panel-head"><div class="panel-title"><h3><?php esc_html_e(
"What MEMANTO does",
"wp-agentic-writer",
); ?></h3><p><?php esc_html_e(
"Keeps preferences and context across writing sessions.",
"wp-agentic-writer",
); ?></p></div></div><div class="panel-body grid-3"><div class="guide-card"><h3><?php esc_html_e(
"Remembers context",
"wp-agentic-writer",
); ?></h3><p class="help"><?php esc_html_e(
"Carry preferences across posts and refreshes.",
"wp-agentic-writer",
); ?></p></div><div class="guide-card"><h3><?php esc_html_e(
"Reduces tokens",
"wp-agentic-writer",
); ?></h3><p class="help"><?php esc_html_e(
"Recall relevant memory instead of resending all context.",
"wp-agentic-writer",
); ?></p></div><div class="guide-card"><h3><?php esc_html_e(
"Optional",
"wp-agentic-writer",
); ?></h3><p class="help"><?php esc_html_e(
"Agentic Writer works without MEMANTO.",
"wp-agentic-writer",
); ?></p></div></div></div>

View File

@@ -0,0 +1,351 @@
<?php
/**
* Settings V2: Models.
*
* @package WP_Agentic_Writer
*/
if (!defined("ABSPATH")) {
exit();
}
$task_labels = [
"chat" => __("Chat", "wp-agentic-writer"),
"clarity" => __("Clarity", "wp-agentic-writer"),
"planning" => __("Planning", "wp-agentic-writer"),
"writing" => __("Writing", "wp-agentic-writer"),
"refinement" => __("Refinement", "wp-agentic-writer"),
"image" => __("Image", "wp-agentic-writer"),
];
$model_values = compact(
"chat_model",
"clarity_model",
"planning_model",
"writing_model",
"refinement_model",
"image_model",
);
?>
<div class="section-head"><div><p class="eyebrow"><?php esc_html_e(
"OpenRouter Connection",
"wp-agentic-writer",
); ?></p><h2><?php esc_html_e(
"OpenRouter",
"wp-agentic-writer",
); ?></h2><p><?php esc_html_e(
"Choose presets, assign models by task, and manage web search features.",
"wp-agentic-writer",
); ?></p></div><button type="button" class="btn" id="wpaw-refresh-models"><?php esc_html_e(
"Refresh models",
"wp-agentic-writer",
); ?></button></div>
<div class="subtab-nav" role="tablist">
<button type="button" class="subtab-btn" role="tab" aria-selected="true" data-aw2-subtab-target="or-connection">Connection</button>
<button type="button" class="subtab-btn" role="tab" aria-selected="false" data-aw2-subtab-target="or-models">Models</button>
</div>
<!-- =======================
TAB: CONNECTION
======================= -->
<div class="subtab-panel active" id="or-connection">
<div class="panel">
<div class="panel-head">
<div class="panel-title"><h3><?php esc_html_e(
"API configuration",
"wp-agentic-writer",
); ?></h3><p><?php esc_html_e(
"OpenRouter powers cloud model access.",
"wp-agentic-writer",
); ?></p></div>
<button type="button" class="btn btn-small" id="wpaw-test-api-key"><?php esc_html_e(
"Test connection",
"wp-agentic-writer",
); ?></button>
</div>
<div class="panel-body">
<div class="field">
<label for="openrouter_api_key"><?php esc_html_e(
"OpenRouter API key",
"wp-agentic-writer",
); ?></label>
<div class="password-row">
<input class="field-control" type="password" id="openrouter_api_key" name="wp_agentic_writer_settings[openrouter_api_key]" value="<?php echo esc_attr(
$api_key,
); ?>" placeholder="sk-or-v1-...">
<button type="button" class="btn" data-aw2-toggle-password="#openrouter_api_key"><?php esc_html_e(
"Show",
"wp-agentic-writer",
); ?></button>
</div>
<p class="help"><?php esc_html_e(
"Stored in WordPress options. Used for model, image, and OpenRouter search requests.",
"wp-agentic-writer",
); ?></p>
</div>
</div>
</div>
<div class="panel">
<div class="panel-head"><div class="panel-title"><h3><?php esc_html_e(
"Budget & cost tracking",
"wp-agentic-writer",
); ?></h3><p><?php esc_html_e(
"Track monthly usage and prevent surprise spend.",
"wp-agentic-writer",
); ?></p></div><span class="status <?php echo esc_attr(
"danger" === $budget_status
? "error"
: ("warning" === $budget_status
? "warn"
: "connected"),
); ?>"><?php echo esc_html(
number_format_i18n($budget_percent, 1),
); ?>%</span></div>
<div class="panel-body">
<div class="grid-3">
<div class="metric-card"><div class="metric-value">$<?php echo esc_html(
number_format_i18n($monthly_used, 2),
); ?></div><div class="metric-label"><?php esc_html_e(
"Used this month",
"wp-agentic-writer",
); ?></div></div>
<div class="metric-card"><div class="metric-value">$<?php echo esc_html(
number_format_i18n($monthly_budget, 2),
); ?></div><div class="metric-label"><?php esc_html_e(
"Monthly budget",
"wp-agentic-writer",
); ?></div></div>
<div class="metric-card"><div class="metric-value"><?php echo esc_html(
number_format_i18n($budget_percent, 1),
); ?>%</div><div class="progress"><span style="width: <?php echo esc_attr(
min(100, $budget_percent),
); ?>%"></span></div><div class="metric-label"><?php esc_html_e(
"Budget usage",
"wp-agentic-writer",
); ?></div></div>
</div>
<div class="budget-controls grid-2" style="margin-top:16px">
<div class="field">
<label for="monthly_budget"><?php esc_html_e(
"Monthly budget (USD)",
"wp-agentic-writer",
); ?></label>
<input class="field-control" type="number" min="0" step="0.01" id="monthly_budget" name="wp_agentic_writer_settings[monthly_budget]" value="<?php echo esc_attr(
$monthly_budget,
); ?>">
</div>
<div class="field">
<label><?php esc_html_e("Enable cost tracking", "wp-agentic-writer"); ?></label>
<label class="switch-row" style="margin-top:4px"><input type="checkbox" name="wp_agentic_writer_settings[cost_tracking_enabled]" value="1" <?php checked(
$cost_tracking_enabled,
); ?>><span class="switch"></span><span><?php esc_html_e(
"Show usage estimates in the editor sidebar.",
"wp-agentic-writer",
); ?></span></label>
</div>
</div>
</div>
</div>
<div class="panel"><div class="panel-head"><div class="panel-title"><h3><?php esc_html_e(
"OpenRouter provider routing",
"wp-agentic-writer",
); ?></h3><p><?php esc_html_e(
"Optional BYOK/provider controls.",
"wp-agentic-writer",
); ?></p></div></div><div class="panel-body">
<label class="switch-row"><input type="checkbox" id="openrouter_provider_routing_enabled" name="wp_agentic_writer_settings[openrouter_provider_routing_enabled]" value="1" <?php checked(
$openrouter_provider_routing_enabled,
); ?> data-aw2-toggle-panel="#wpaw2-provider-routing-fields"><span class="switch"></span><span><?php esc_html_e(
"Enable provider routing",
"wp-agentic-writer",
); ?></span></label>
<div id="wpaw2-provider-routing-fields" class="provider-routing-fields" <?php echo $openrouter_provider_routing_enabled
? ""
: "hidden"; ?>>
<div class="field-label-row"><span><?php esc_html_e(
"Provider slug",
"wp-agentic-writer",
); ?></span><span class="help"><?php esc_html_e(
"Applies to the slug input and provider routing behavior below.",
"wp-agentic-writer",
); ?></span></div>
<div class="grid-3 provider-routing-grid"><div class="field"><input class="field-control" type="text" aria-label="<?php esc_attr_e(
"Provider slug",
"wp-agentic-writer",
); ?>" name="wp_agentic_writer_settings[openrouter_provider_slug]" value="<?php echo esc_attr(
$openrouter_provider_slug,
); ?>" placeholder="openai"></div><label class="switch-row"><input type="checkbox" name="wp_agentic_writer_settings[openrouter_provider_only]" value="1" <?php checked(
$openrouter_provider_only,
); ?>><span class="switch"></span><span><?php esc_html_e(
"Only provider",
"wp-agentic-writer",
); ?></span></label><label class="switch-row"><input type="checkbox" name="wp_agentic_writer_settings[openrouter_allow_provider_fallbacks]" value="1" <?php checked(
$openrouter_allow_provider_fallbacks,
); ?>><span class="switch"></span><span><?php esc_html_e(
"Allow fallback",
"wp-agentic-writer",
); ?></span></label></div>
</div>
</div></div>
</div>
<!-- =======================
TAB: MODELS
======================= -->
<div class="subtab-panel" id="or-models">
<div class="panel"><div class="panel-head"><div class="panel-title"><h3><?php esc_html_e(
"Quick presets",
"wp-agentic-writer",
); ?></h3><p><?php esc_html_e(
"Apply common model combinations.",
"wp-agentic-writer",
); ?></p></div></div><div class="panel-body grid-3">
<button type="button" class="preset-card" data-aw2-preset="budget">
<span class="preset-tier-label"><?php esc_html_e(
"Budget",
"wp-agentic-writer",
); ?></span>
<span class="preset-price">$0<span class="preset-price-cents">.06</span></span>
<span class="preset-price-unit"><?php esc_html_e(
"per article",
"wp-agentic-writer",
); ?></span>
<span class="preset-divider"></span>
<span class="preset-models">
<span class="preset-model-row"><span class="preset-model-dot" style="background:#4285f4"></span><span class="preset-model-name">Gemini 2.5 Flash</span><span class="preset-model-role"><?php esc_html_e(
"Chat · Plan · Clarity",
"wp-agentic-writer",
); ?></span></span>
<span class="preset-model-row"><span class="preset-model-dot" style="background:#ff7000"></span><span class="preset-model-name">Mistral Small</span><span class="preset-model-role"><?php esc_html_e(
"Writing",
"wp-agentic-writer",
); ?></span></span>
<span class="preset-model-row"><span class="preset-model-dot" style="background:#10a37f"></span><span class="preset-model-name">GPT-4o</span><span class="preset-model-role"><?php esc_html_e(
"Image",
"wp-agentic-writer",
); ?></span></span>
</span>
</button>
<button type="button" class="preset-card active" data-aw2-preset="balanced">
<span class="preset-tier-label"><?php esc_html_e(
"Balanced",
"wp-agentic-writer",
); ?> <span class="preset-badge"><?php esc_html_e(
"Recommended",
"wp-agentic-writer",
); ?></span></span>
<span class="preset-price">$0<span class="preset-price-cents">.14</span></span>
<span class="preset-price-unit"><?php esc_html_e(
"per article",
"wp-agentic-writer",
); ?></span>
<span class="preset-divider"></span>
<span class="preset-models">
<span class="preset-model-row"><span class="preset-model-dot" style="background:#4285f4"></span><span class="preset-model-name">Gemini 2.5 Flash</span><span class="preset-model-role"><?php esc_html_e(
"Chat · Plan · Clarity",
"wp-agentic-writer",
); ?></span></span>
<span class="preset-model-row"><span class="preset-model-dot" style="background:#d97757"></span><span class="preset-model-name">Claude Sonnet 4</span><span class="preset-model-role"><?php esc_html_e(
"Writing · Refinement",
"wp-agentic-writer",
); ?></span></span>
<span class="preset-model-row"><span class="preset-model-dot" style="background:#10a37f"></span><span class="preset-model-name">GPT-4o</span><span class="preset-model-role"><?php esc_html_e(
"Image",
"wp-agentic-writer",
); ?></span></span>
</span>
</button>
<button type="button" class="preset-card" data-aw2-preset="premium">
<span class="preset-tier-label"><?php esc_html_e(
"Premium",
"wp-agentic-writer",
); ?></span>
<span class="preset-price">$0<span class="preset-price-cents">.31</span></span>
<span class="preset-price-unit"><?php esc_html_e(
"per article",
"wp-agentic-writer",
); ?></span>
<span class="preset-divider"></span>
<span class="preset-models">
<span class="preset-model-row"><span class="preset-model-dot" style="background:#4285f4"></span><span class="preset-model-name">Gemini 3 Flash</span><span class="preset-model-role"><?php esc_html_e(
"Chat · Plan",
"wp-agentic-writer",
); ?></span></span>
<span class="preset-model-row"><span class="preset-model-dot" style="background:#d97757"></span><span class="preset-model-name">Claude Sonnet 4</span><span class="preset-model-role"><?php esc_html_e(
"Clarity",
"wp-agentic-writer",
); ?></span></span>
<span class="preset-model-row"><span class="preset-model-dot" style="background:#10a37f"></span><span class="preset-model-name">GPT-4.1</span><span class="preset-model-role"><?php esc_html_e(
"Writing · Refinement",
"wp-agentic-writer",
); ?></span></span>
<span class="preset-model-row"><span class="preset-model-dot" style="background:#10a37f"></span><span class="preset-model-name">GPT-4o</span><span class="preset-model-role"><?php esc_html_e(
"Image",
"wp-agentic-writer",
); ?></span></span>
</span>
</button>
</div></div>
<div class="panel"><div class="panel-head"><div class="panel-title"><h3><?php esc_html_e(
"Task model assignments",
"wp-agentic-writer",
); ?></h3><p><?php esc_html_e(
"Each workflow stage can use a specialized model.",
"wp-agentic-writer",
); ?></p></div><span class="status connected" id="wpaw2-cost-estimate">~$0.14</span></div><div class="panel-body grid-2">
<?php foreach ($task_labels as $task_key => $task_label):
$field =
"writing" === $task_key ? "writing_model" : $task_key . "_model"; ?>
<div class="field"><label for="<?php echo esc_attr(
$field,
); ?>"><?php echo esc_html(
$task_label,
); ?></label><select class="field-control wpaw2-model-select" id="<?php echo esc_attr(
$field,
); ?>" name="wp_agentic_writer_settings[<?php echo esc_attr(
$field,
); ?>]"><option value="<?php echo esc_attr(
$model_values[$field] ?? "",
); ?>"><?php echo esc_html(
$model_values[$field] ?? "",
); ?></option></select><p class="help"><?php echo esc_html(
ucfirst($task_key),
); ?> <?php esc_html_e("stage model.", "wp-agentic-writer"); ?></p></div>
<?php
endforeach; ?>
</div></div>
<div class="panel"><div class="panel-head"><div class="panel-title"><h3><?php esc_html_e(
"Custom models",
"wp-agentic-writer",
); ?></h3><p><?php esc_html_e(
"Add exact model IDs not returned by the API.",
"wp-agentic-writer",
); ?></p></div><button type="button" class="btn btn-small" id="wpaw2-add-custom-model"><?php esc_html_e(
"Add model",
"wp-agentic-writer",
); ?></button></div><div class="panel-body" id="wpaw2-custom-models">
<?php foreach ((array) $custom_models as $custom_model): ?>
<div class="custom-row"><input class="field-control" type="text" value="<?php echo esc_attr(
$custom_model["id"] ?? "",
); ?>" placeholder="provider/model-id"><input class="field-control" type="text" value="<?php echo esc_attr(
$custom_model["name"] ?? "",
); ?>" placeholder="Display name"><select class="field-control"><option value="text" <?php selected(
$custom_model["type"] ?? "text",
"text",
); ?>>Text</option><option value="image" <?php selected(
$custom_model["type"] ?? "text",
"image",
); ?>>Image</option></select><button type="button" class="btn btn-danger btn-small" data-remove><?php esc_html_e(
"Remove",
"wp-agentic-writer",
); ?></button></div>
<?php endforeach; ?>
</div></div>
</div>

View File

@@ -0,0 +1,150 @@
<?php
/**
* Settings V2: Tools.
*
* @package WP_Agentic_Writer
*/
if (!defined("ABSPATH")) {
exit();
} ?>
<div class="section-head">
<div>
<p class="eyebrow"><?php esc_html_e("Capabilities", "wp-agentic-writer"); ?></p>
<h2><?php esc_html_e("Tools", "wp-agentic-writer"); ?></h2>
<p><?php esc_html_e(
"Configure external tools and APIs that give your AI agent superpowers like internet access.",
"wp-agentic-writer",
); ?></p>
</div>
</div>
<div class="panel">
<div class="panel-head">
<div class="panel-title">
<h3><?php esc_html_e("Web Search", "wp-agentic-writer"); ?></h3>
<p><?php esc_html_e(
"Allow the agent to search the internet for fresh context. OpenRouter natively supports this, but you can bypass external fees by plugging in your own search API.",
"wp-agentic-writer",
); ?></p>
</div>
<label class="switch-row" style="margin:0"><input type="checkbox" name="wp_agentic_writer_settings[web_search_enabled]" value="1" <?php checked(
$web_search_enabled,
); ?>><span class="switch"></span></label>
</div>
<div class="panel-body">
<div class="grid-2">
<div class="field"><label for="search_engine"><?php esc_html_e(
"Search engine format",
"wp-agentic-writer",
); ?></label>
<select class="field-control" id="search_engine" name="wp_agentic_writer_settings[search_engine]">
<option value="auto" <?php selected(
$search_engine,
"auto",
); ?>>Auto (OpenRouter if available)</option>
<option value="openrouter" <?php selected(
$search_engine,
"openrouter",
); ?>>OpenRouter Native</option>
<option value="9router" <?php selected(
$search_engine,
"9router",
); ?>>9Router (Proxy)</option>
<option value="tavily" <?php selected(
$search_engine,
"tavily",
); ?>>Tavily API</option>
<option value="serper" <?php selected(
$search_engine,
"serper",
); ?>>Serper.dev (Google)</option>
<option value="brave" <?php selected(
$search_engine,
"brave",
); ?>>Brave Search API</option>
</select>
</div>
<div class="field"><label for="search_depth"><?php esc_html_e(
"Search depth",
"wp-agentic-writer",
); ?></label>
<select class="field-control" id="search_depth" name="wp_agentic_writer_settings[search_depth]">
<option value="light" <?php selected($search_depth, "light"); ?>>Light</option>
<option value="medium" <?php selected(
$search_depth,
"medium",
); ?>>Medium</option>
<option value="deep" <?php selected($search_depth, "deep"); ?>>Deep</option>
</select>
</div>
</div>
<!-- Custom Search Wrapper -->
<div id="wpaw2-custom-search-fields" style="margin-top:20px; <?php echo in_array(
$search_engine,
["auto", "openrouter"],
)
? "display:none;"
: ""; ?>">
<div class="field" style="margin-bottom:12px;">
<label for="custom_search_url"><?php esc_html_e(
"Search Base URL",
"wp-agentic-writer",
); ?></label>
<input class="field-control" type="url" id="custom_search_url" name="wp_agentic_writer_settings[custom_search_url]" value="<?php echo esc_attr(
$custom_search_url ?? "",
); ?>" placeholder="e.g. http://localhost:20128/v1/search">
</div>
<div class="field">
<label for="brave_search_api_key"><?php esc_html_e(
"Search API key",
"wp-agentic-writer",
); ?></label>
<div class="password-row">
<input class="field-control" type="password" id="brave_search_api_key" name="wp_agentic_writer_settings[brave_search_api_key]" value="<?php echo esc_attr(
$brave_search_api_key,
); ?>" placeholder="sk-...">
<button type="button" class="btn" data-aw2-toggle-password="#brave_search_api_key"><?php esc_html_e(
"Show",
"wp-agentic-writer",
); ?></button>
</div>
</div>
</div>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const searchEngine = document.getElementById('search_engine');
const searchFields = document.getElementById('wpaw2-custom-search-fields');
const searchUrl = document.getElementById('custom_search_url');
if (searchEngine && searchFields) {
searchEngine.addEventListener('change', function() {
if (this.value === 'auto' || this.value === 'openrouter') {
searchFields.style.display = 'none';
} else {
searchFields.style.display = 'block';
// Auto-fill standard endpoints if empty or if currently matching another default
const defaultUrls = [
'',
'http://localhost:20128/v1/search',
'https://api.tavily.com/search',
'https://google.serper.dev/search',
'https://api.search.brave.com/res/v1/web/search'
];
if (defaultUrls.includes(searchUrl.value.trim())) {
if (this.value === '9router') searchUrl.value = 'http://localhost:20128/v1/search';
if (this.value === 'tavily') searchUrl.value = 'https://api.tavily.com/search';
if (this.value === 'serper') searchUrl.value = 'https://google.serper.dev/search';
if (this.value === 'brave') searchUrl.value = 'https://api.search.brave.com/res/v1/web/search';
}
}
});
}
});
</script>

View File

@@ -1,246 +0,0 @@
<?php
/**
* Settings Layout - Bootstrap 5 wrapper
*
* @package WP_Agentic_Writer
* @var array $view_data Prepared view data from class-settings-v2.php
*/
if (!defined("ABSPATH")) {
exit();
}
// Extract view data for easier access
extract($view_data);
?>
<div class="wrap wpaw-settings-v2-wrap">
<!-- Agentic IDE Split View Layout -->
<div class="wpaw-ide-container d-flex">
<!-- Left Sidebar: Settings Navigation -->
<div class="wpaw-sidebar-nav flex-shrink-0">
<!-- Header inside Sidebar -->
<div class="wpaw-sidebar-header p-3 mb-2 border-bottom border-dark">
<div class="d-flex align-items-center gap-2">
<img src="<?php echo esc_url(WP_AGENTIC_WRITER_URL . "assets/img/icon.svg"); ?>"
alt="WP Agentic Writer"
style="width: 24px; height: 24px; filter: invert(1)">
<h1 class="h6 mb-0 text-white fw-bold">Agentic Writer</h1>
</div>
</div>
<!-- Search Placeholder (Phase 2) -->
<!-- <div class="px-3 mb-3"><input type="text" class="form-control form-control-sm wpaw-search-input" placeholder="Search settings..."></div> -->
<!-- Navigation Tree -->
<div class="wpaw-nav-tree px-2">
<div class="text-uppercase small text-secondary fw-semibold mb-2 px-2" style="font-size: 0.7rem; tracking: 1px;">Configuration</div>
<ul class="nav flex-column gap-1" id="wpaw-settings-tabs" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active w-100 text-start d-flex align-items-center gap-2" id="general-tab" data-bs-toggle="pill" data-bs-target="#general" type="button" role="tab" aria-controls="general" aria-selected="true">
<i class="bi bi-sliders"></i>
<?php esc_html_e("General", "wp-agentic-writer"); ?>
</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link w-100 text-start d-flex align-items-center gap-2" id="models-tab" data-bs-toggle="pill" data-bs-target="#models" type="button" role="tab" aria-controls="models" aria-selected="false">
<i class="bi bi-stars"></i>
<?php esc_html_e("AI Models", "wp-agentic-writer"); ?>
</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link w-100 text-start d-flex align-items-center gap-2" id="local-backend-tab" data-bs-toggle="pill" data-bs-target="#local-backend" type="button" role="tab" aria-controls="local-backend" aria-selected="false">
<i class="bi bi-house-fill"></i>
<?php esc_html_e("Local Backend", "wp-agentic-writer"); ?>
</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link w-100 text-start d-flex align-items-center gap-2" id="memanto-tab" data-bs-toggle="pill" data-bs-target="#memanto" type="button" role="tab" aria-controls="memanto" aria-selected="false">
<i class="bi bi-cpu"></i>
<?php esc_html_e("MEMANTO", "wp-agentic-writer"); ?>
</button>
</li>
<div class="text-uppercase small text-secondary fw-semibold mb-2 mt-4 px-2" style="font-size: 0.7rem; tracking: 1px;">Analytics & Docs</div>
<li class="nav-item" role="presentation">
<button class="nav-link w-100 text-start d-flex align-items-center gap-2" id="cost-log-tab" data-bs-toggle="pill" data-bs-target="#cost-log" type="button" role="tab" aria-controls="cost-log" aria-selected="false">
<i class="bi bi-graph-up"></i>
<?php esc_html_e("OpenRouter Cost Log", "wp-agentic-writer"); ?>
</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link w-100 text-start d-flex align-items-center gap-2" id="guide-tab" data-bs-toggle="pill" data-bs-target="#guide" type="button" role="tab" aria-controls="guide" aria-selected="false">
<i class="bi bi-book"></i>
<?php esc_html_e("Model Guide", "wp-agentic-writer"); ?>
</button>
</li>
</ul>
</div>
</div>
<!-- Right Content Pane: Settings Forms -->
<div class="wpaw-content-pane flex-grow-1 d-flex flex-column h-100">
<form method="post" action="options.php" id="wpaw-settings-form" class="h-100 d-flex flex-column">
<?php settings_fields("wp_agentic_writer_settings"); ?>
<!-- Workflow Pipeline Progress -->
<div class="wpaw-workflow-progress wpaw-workflow-compact mb-4" id="wpaw-workflow-display">
<div class="wpaw-progress-header">
<span class="wpaw-progress-title">Writing Pipeline</span>
<span class="wpaw-progress-status" id="wpaw-workflow-status">Idle</span>
</div>
<div class="wpaw-progress-steps">
<!-- Step 1: Context -->
<div class="wpaw-step" data-step="1" data-tooltip="Context: Load post & keyword">
<div class="wpaw-step-circle">
<span class="wpaw-step-icon">📋</span>
</div>
<span class="wpaw-step-label">Context</span>
</div>
<!-- Connector -->
<div class="wpaw-step-connector" data-connector="1"></div>
<!-- Step 2: Planning -->
<div class="wpaw-step" data-step="2" data-tooltip="Planning: Create outline">
<div class="wpaw-step-circle">
<span class="wpaw-step-icon">📝</span>
</div>
<span class="wpaw-step-label">Planning</span>
</div>
<!-- Connector -->
<div class="wpaw-step-connector" data-connector="2"></div>
<!-- Step 3: Writing -->
<div class="wpaw-step" data-step="3" data-tooltip="Writing: Generate content">
<div class="wpaw-step-circle">
<span class="wpaw-step-icon">✍️</span>
</div>
<span class="wpaw-step-label">Writing</span>
</div>
<!-- Connector -->
<div class="wpaw-step-connector" data-connector="3"></div>
<!-- Step 4: Refinement -->
<div class="wpaw-step" data-step="4" data-tooltip="Refinement: Polish & optimize">
<div class="wpaw-step-circle">
<span class="wpaw-step-icon">🎯</span>
</div>
<span class="wpaw-step-label">Refinement</span>
</div>
<!-- Connector -->
<div class="wpaw-step-connector" data-connector="4"></div>
<!-- Step 5: Done -->
<div class="wpaw-step" data-step="5" data-tooltip="Complete: Ready to publish">
<div class="wpaw-step-circle">
<span class="wpaw-step-icon">✅</span>
</div>
<span class="wpaw-step-label">Done</span>
</div>
</div>
<div class="wpaw-step-message mt-3" id="wpaw-workflow-message" style="display: none;"></div>
</div>
<!-- Scrollable Tab Content Area -->
<div class="wpaw-tab-scroll-area flex-grow-1 p-4 p-md-5 overflow-auto">
<div class="tab-content" id="wpaw-settings-tab-content">
<!-- General Tab -->
<div class="tab-pane fade show active" id="general" role="tabpanel" aria-labelledby="general-tab">
<div class="mb-4 pb-3 border-bottom border-dark">
<h2 class="h4 text-white m-0">General Settings</h2>
<p class="text-secondary small mt-1">Configure global API keys, budget, and content parameters.</p>
</div>
<?php include WP_AGENTIC_WRITER_DIR . "views/settings/tab-general.php"; ?>
</div>
<!-- Models Tab -->
<div class="tab-pane fade" id="models" role="tabpanel" aria-labelledby="models-tab">
<div class="mb-4 pb-3 border-bottom border-dark">
<h2 class="h4 text-white m-0">AI Models</h2>
<p class="text-secondary small mt-1">Select logic engines for different stages of the writing pipeline.</p>
</div>
<?php include WP_AGENTIC_WRITER_DIR . "views/settings/tab-models.php"; ?>
</div>
<!-- Local Backend Tab -->
<div class="tab-pane fade" id="local-backend" role="tabpanel" aria-labelledby="local-backend-tab">
<div class="mb-4 pb-3 border-bottom border-dark">
<h2 class="h4 text-white m-0">Local Backend</h2>
<p class="text-secondary small mt-1">Configure connections to local LM Studio or Ollama instances.</p>
</div>
<?php include WP_AGENTIC_WRITER_DIR . "views/settings/tab-local-backend.php"; ?>
</div>
<!-- MEMANTO Tab -->
<div class="tab-pane fade" id="memanto" role="tabpanel" aria-labelledby="memanto-tab">
<div class="mb-4 pb-3 border-bottom border-dark">
<h2 class="h4 text-white m-0">MEMANTO Context Keeper</h2>
<p class="text-secondary small mt-1">Optional persistent memory for your AI writing assistant. The plugin works perfectly without it.</p>
</div>
<?php include WP_AGENTIC_WRITER_DIR . "views/settings/tab-memanto.php"; ?>
</div>
<!-- Cost Log Tab -->
<div class="tab-pane fade" id="cost-log" role="tabpanel" aria-labelledby="cost-log-tab">
<div class="mb-4 pb-3 border-bottom border-dark">
<h2 class="h4 text-white m-0">OpenRouter Cost Analytics</h2>
<p class="text-secondary small mt-1">Track API token usage and expenses across all generations.</p>
</div>
<?php include WP_AGENTIC_WRITER_DIR . "views/settings/tab-cost-log.php"; ?>
</div>
<!-- Guide Tab -->
<div class="tab-pane fade" id="guide" role="tabpanel" aria-labelledby="guide-tab">
<div class="mb-4 pb-3 border-bottom border-dark">
<h2 class="h4 text-white m-0">Provider Documentation</h2>
<p class="text-secondary small mt-1">Reference materials for selecting the right model constraints.</p>
</div>
<?php include WP_AGENTIC_WRITER_DIR . "views/settings/tab-guide.php"; ?>
</div>
</div>
</div>
<!-- Fixed Bottom Save Bar (Compact) -->
<div class="wpaw-save-bar p-3 border-top border-dark d-flex justify-content-between align-items-center bg-transparent mt-auto sticky-bottom">
<div class="text-secondary small d-flex align-items-center gap-2">
<span class="dashicons dashicons-plugin text-primary"></span>
<?php printf(
esc_html__("v%s", "wp-agentic-writer"),
esc_html(WP_AGENTIC_WRITER_VERSION),
); ?>
</div>
<div class="d-flex gap-2">
<button type="button" class="btn btn-sm btn-outline-secondary" id="wpaw-reset-settings">
<?php esc_html_e("Reset Defaults", "wp-agentic-writer"); ?>
</button>
<button type="submit" class="btn btn-sm btn-primary px-4 fw-semibold" id="wpaw-save-settings">
<?php
$is_mac =
isset($_SERVER["HTTP_USER_AGENT"]) &&
strpos(wp_unslash($_SERVER["HTTP_USER_AGENT"]), "Mac OS") !== false;
$cmd_key = $is_mac ? "⌘" : "Ctrl";
?>
<?php esc_html_e(
"Save Settings",
"wp-agentic-writer",
); ?> <kbd class="ms-1 bg-dark text-white border-0 py-0"><?php echo esc_html(
$cmd_key,
); ?>+S</kbd>
</button>
</div>
</div>
</form>
</div>
</div>
</div>
<!-- Toast Container for Notifications -->
<div class="toast-container position-fixed bottom-0 end-0 p-3">
<div id="wpaw-toast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<span class="me-2">✨</span>
<strong class="me-auto"><?php esc_html_e(
"WP Agentic Writer",
"wp-agentic-writer",
); ?></strong>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body" id="wpaw-toast-message"></div>
</div>
</div>

View File

@@ -1,194 +0,0 @@
<?php
/**
* Settings Tab: Cost Log
*
* Uses AJAX for server-side pagination and filtering.
*
* @package WP_Agentic_Writer
*/
if ( ! defined( 'ABSPATH' ) ) {
exit;
}
?>
<div class="row g-4">
<!-- Summary Stats -->
<div class="col-12">
<div class="card border-0 ">
<div class="card-header border-bottom-0 pt-4 pb-0">
<div class="d-flex align-items-center">
<span class="me-3 fs-4">📊</span>
<div>
<h5 class="card-title mb-1"><?php esc_html_e( 'OpenRouter Cost Summary', 'wp-agentic-writer' ); ?></h5>
<p class="text-muted small mb-0"><?php esc_html_e( 'Overview of your API spending', 'wp-agentic-writer' ); ?></p>
</div>
</div>
</div>
<div class="card-body">
<div class="row g-3">
<div class="col-6 col-md-3">
<div class="p-3 rounded bg-primary bg-opacity-10 text-center">
<div class="fs-4 fw-bold text-primary" id="wpaw-stat-all-time">$0.0000</div>
<div class="text-muted small"><?php esc_html_e( 'All Time', 'wp-agentic-writer' ); ?></div>
</div>
</div>
<div class="col-6 col-md-3">
<div class="p-3 rounded bg-success bg-opacity-10 text-center">
<div class="fs-4 fw-bold text-success" id="wpaw-stat-monthly">$0.0000</div>
<div class="text-muted small"><?php esc_html_e( 'This Month', 'wp-agentic-writer' ); ?></div>
</div>
</div>
<div class="col-6 col-md-3">
<div class="p-3 rounded bg-info bg-opacity-10 text-center">
<div class="fs-4 fw-bold text-info" id="wpaw-stat-today">$0.0000</div>
<div class="text-muted small"><?php esc_html_e( 'Today', 'wp-agentic-writer' ); ?></div>
</div>
</div>
<div class="col-6 col-md-3">
<div class="p-3 rounded bg-warning bg-opacity-10 text-center">
<div class="fs-4 fw-bold text-warning" id="wpaw-stat-avg">$0.0000</div>
<div class="text-muted small d-flex justify-content-center align-items-center gap-1">
<span><?php esc_html_e( 'Avg Per Post', 'wp-agentic-writer' ); ?></span>
<span class="dashicons dashicons-info-outline" title="<?php esc_attr_e( 'All-time OpenRouter cost divided by total posts with OpenRouter usage.', 'wp-agentic-writer' ); ?>"></span>
</div>
</div>
</div>
</div>
<div class="mt-4">
<div class="table-responsive">
<table class="table table-sm table-hover mb-0" id="wpaw-action-summary-table">
<thead class="table-light">
<tr>
<th><?php esc_html_e( 'Action', 'wp-agentic-writer' ); ?></th>
<th class="text-end"><?php esc_html_e( 'Calls', 'wp-agentic-writer' ); ?></th>
<th class="text-end"><?php esc_html_e( 'Total Cost', 'wp-agentic-writer' ); ?></th>
<th class="text-end"><?php esc_html_e( 'Avg / Call', 'wp-agentic-writer' ); ?></th>
</tr>
</thead>
<tbody id="wpaw-action-summary-tbody">
<tr>
<td colspan="4" class="text-center text-muted py-3"><?php esc_html_e( 'Loading action summary...', 'wp-agentic-writer' ); ?></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<!-- Filters -->
<div class="col-12">
<div class="card border-0 ">
<div class="card-header border-bottom-0 pt-4 pb-0">
<div class="d-flex align-items-center">
<span class="me-3 fs-4">🔍</span>
<div>
<h5 class="card-title mb-1"><?php esc_html_e( 'Filter OpenRouter Cost Log', 'wp-agentic-writer' ); ?></h5>
</div>
</div>
</div>
<div class="card-body">
<div class="row g-3 align-items-end">
<div class="col-md-2">
<label for="wpaw-filter-post" class="form-label small"><?php esc_html_e( 'Post ID', 'wp-agentic-writer' ); ?></label>
<input type="number" class="form-control form-control-sm" id="wpaw-filter-post" placeholder="<?php esc_attr_e( 'All', 'wp-agentic-writer' ); ?>" />
</div>
<div class="col-md-2">
<label for="wpaw-filter-model" class="form-label small"><?php esc_html_e( 'Model', 'wp-agentic-writer' ); ?></label>
<select class="form-select form-select-sm" id="wpaw-filter-model">
<option value=""><?php esc_html_e( 'All models', 'wp-agentic-writer' ); ?></option>
</select>
</div>
<div class="col-md-2">
<label for="wpaw-filter-type" class="form-label small"><?php esc_html_e( 'Type', 'wp-agentic-writer' ); ?></label>
<select class="form-select form-select-sm" id="wpaw-filter-type">
<option value=""><?php esc_html_e( 'All types', 'wp-agentic-writer' ); ?></option>
</select>
</div>
<div class="col-md-2">
<label for="wpaw-filter-date-from" class="form-label small"><?php esc_html_e( 'Date From', 'wp-agentic-writer' ); ?></label>
<input type="date" class="form-control form-control-sm" id="wpaw-filter-date-from" />
</div>
<div class="col-md-2">
<label for="wpaw-filter-date-to" class="form-label small"><?php esc_html_e( 'Date To', 'wp-agentic-writer' ); ?></label>
<input type="date" class="form-control form-control-sm" id="wpaw-filter-date-to" />
</div>
<div class="col-md-2">
<div class="d-flex gap-2">
<button type="button" class="btn btn-primary btn-sm flex-grow-1" id="wpaw-apply-filters">
<span class="dashicons dashicons-filter"></span>
</button>
<button type="button" class="btn btn-outline-secondary btn-sm" id="wpaw-clear-filters">
<span class="dashicons dashicons-dismiss"></span>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Cost Log Table -->
<div class="col-12">
<div class="card border-0 ">
<div class="card-header border-bottom-0 pt-4 pb-0">
<div class="d-flex align-items-center justify-content-between">
<div class="d-flex align-items-center">
<span class="me-3 fs-4">📋</span>
<div>
<h5 class="card-title mb-1"><?php esc_html_e( 'Detailed OpenRouter Cost Log', 'wp-agentic-writer' ); ?></h5>
<p class="text-muted small mb-0" id="wpaw-records-info"><?php esc_html_e( 'Loading...', 'wp-agentic-writer' ); ?></p>
</div>
</div>
<button type="button" class="btn btn-outline-primary btn-sm" id="wpaw-export-csv">
<span class="dashicons dashicons-download me-1"></span>
<?php esc_html_e( 'Export CSV', 'wp-agentic-writer' ); ?>
</button>
</div>
</div>
<div class="card-body p-0">
<div class="table-responsive">
<table class="table table-hover mb-0" id="wpaw-cost-log-table">
<thead class="table-light">
<tr>
<th class="px-3" style="width: 50%;"><?php esc_html_e( 'Post Title', 'wp-agentic-writer' ); ?></th>
<th class="text-center"><?php esc_html_e( 'API Calls', 'wp-agentic-writer' ); ?></th>
<th class="text-end px-3"><?php esc_html_e( 'Total OpenRouter Cost', 'wp-agentic-writer' ); ?></th>
</tr>
</thead>
<tbody id="wpaw-cost-log-tbody">
<tr>
<td colspan="3" class="text-center py-5">
<div class="spinner-border text-primary" role="status">
<span class="visually-hidden"><?php esc_html_e( 'Loading...', 'wp-agentic-writer' ); ?></span>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<!-- Pagination -->
<div class="d-flex justify-content-between align-items-center p-3 border-top" id="wpaw-pagination-wrapper">
<div class="d-flex align-items-center gap-2">
<label for="wpaw-per-page" class="form-label mb-0 small"><?php esc_html_e( 'Per page:', 'wp-agentic-writer' ); ?></label>
<select class="form-select form-select-sm" id="wpaw-per-page" style="width: auto;">
<option value="10">10</option>
<option value="25" selected>25</option>
<option value="50">50</option>
<option value="100">100</option>
</select>
</div>
<nav aria-label="Cost log pagination">
<ul class="pagination pagination-sm mb-0" id="wpaw-pagination">
<!-- Pagination will be populated by JS -->
</ul>
</nav>
</div>
</div>
</div>
</div>
</div>

View File

@@ -1,376 +0,0 @@
<?php
/**
* Settings Tab: General
*
* @package WP_Agentic_Writer
* @var string $api_key
* @var float $monthly_budget
* @var float $monthly_used
* @var float $budget_percent
* @var string $budget_status
* @var bool $cost_tracking_enabled
* @var bool $web_search_enabled
* @var string $search_engine
* @var string $search_depth
* @var bool $enable_clarification_quiz
* @var string $clarity_confidence_threshold
* @var array $required_context_categories
* @var int $chat_history_limit
* @var array $preferred_languages
* @var array $custom_languages
*/
if ( ! defined( 'ABSPATH' ) ) {
exit;
}
$settings_instance = WP_Agentic_Writer_Settings_V2::get_instance();
$available_languages = $settings_instance->get_available_languages();
$ai_client_available = wpaw_is_wp_ai_client_available();
$ai_capabilities = array();
if ( $ai_client_available ) {
$client = WPAW_WP_AI_Client::get_instance();
$ai_capabilities = $client->get_capabilities();
}
?>
<?php if ( $ai_client_available && $ai_capabilities['text_support'] ) : ?>
<div class="alert alert-info d-flex align-items-start gap-2 mb-4" role="alert">
<i class="bi bi-robot fs-5"></i>
<div>
<strong><?php esc_html_e( 'WordPress 7.0 AI Mode', 'wp-agentic-writer' ); ?></strong>
<p class="mb-0 small">
<?php esc_html_e( 'This site has WordPress 7.0 AI infrastructure. Agentic Writer will use the built-in AI Client for simple tasks (titles, excerpts) and the plugin for advanced features (streaming, block refinement, SEO/GEO).', 'wp-agentic-writer' ); ?>
</p>
</div>
</div>
<?php endif; ?>
<div class="row g-4">
<!-- API Configuration -->
<div class="col-12">
<div class="card border-0 ">
<div class="card-header border-bottom-0 pt-3">
<div class="d-flex align-items-center">
<div>
<h5 class="card-title mb-1 d-flex align-items-center gap-2"><i class="bi bi-key-fill text-warning"></i><?php esc_html_e( 'API Configuration', 'wp-agentic-writer' ); ?></h5>
<p class="text-muted small mb-0"><?php esc_html_e( 'Connect to OpenRouter to access AI models', 'wp-agentic-writer' ); ?></p>
</div>
</div>
</div>
<div class="card-body">
<div class="row align-items-end">
<div class="col-md-8">
<label for="openrouter_api_key" class="form-label fw-semibold">
<?php esc_html_e( 'OpenRouter API Key', 'wp-agentic-writer' ); ?>
<span class="text-danger ms-2">*</span>
</label>
<div class="form-text">
<?php printf(
wp_kses_post(
__(
'Get your API key from <a href="%s" target="_blank" class="text-decoration-none">OpenRouter <i class="bi bi-box-arrow-up-right"></i></a>',
"wp-agentic-writer",
),
),
"https://openrouter.ai/keys",
); ?>
</div>
<div class="input-group">
<span class="input-group-text"><span class="dashicons dashicons-admin-network"></span></span>
<input type="password" class="form-control" id="openrouter_api_key" name="wp_agentic_writer_settings[openrouter_api_key]" value="<?php echo esc_attr( $api_key ); ?>" placeholder="sk-or-v1-..." />
<button class="btn" type="button" id="wpaw-toggle-api-key" style="border-color:#3a4a5e !important">
<span class="bi bi-eye"></span>
</button>
</div>
</div>
<div class="col-md-4">
<button type="button" class="btn btn-outline-primary w-100" id="wpaw-test-api-key">
<i class="bi bi-check-circle-fill"></i>
<?php esc_html_e( 'Test Connection', 'wp-agentic-writer' ); ?>
</button>
</div>
</div>
</div>
</div>
</div>
<!-- Budget & Cost Tracking -->
<div class="col-12">
<div class="card border-0 ">
<div class="card-header border-bottom-0 pt-3">
<div class="d-flex align-items-center">
<div>
<h5 class="card-title mb-1 d-flex align-items-center gap-2"><i class="bi bi-currency-dollar text-warning"></i><?php esc_html_e( 'OpenRouter Budget & Cost Tracking', 'wp-agentic-writer' ); ?></h5>
<p class="text-muted small mb-0"><?php esc_html_e( 'Monitor and control your API spending', 'wp-agentic-writer' ); ?></p>
</div>
</div>
</div>
<div class="card-body">
<!-- Budget Overview -->
<div class="row mb-4">
<div class="col-md-4">
<div class="p-3 rounded border text-center">
<div class="fs-3 fw-bold text-primary">$<?php echo number_format( $monthly_used, 2 ); ?></div>
<div class="text-muted small"><?php esc_html_e( 'Used This Month', 'wp-agentic-writer' ); ?></div>
</div>
</div>
<div class="col-md-4">
<div class="p-3 border">
<div class="d-flex justify-content-between mb-1">
<span class="small text-muted"><?php esc_html_e( 'Budget Usage', 'wp-agentic-writer' ); ?></span>
<span class="small fw-semibold"><?php echo number_format( $budget_percent, 1 ); ?>%</span>
</div>
<div class="progress" style="height: 10px;">
<div class="progress-bar bg-<?php echo esc_attr( $budget_status ); ?>" role="progressbar" style="width: <?php echo min( $budget_percent, 100 ); ?>%"></div>
</div>
<div class="small text-muted mt-1">
$<?php echo number_format( $monthly_used, 2 ); ?> / $<?php echo number_format( $monthly_budget, 2 ); ?>
</div>
</div>
</div>
<div class="col-md-4">
<div class="p-3 rounded border text-center">
<div class="fs-3 fw-bold text-success">$<?php echo number_format( max( 0, $monthly_budget - $monthly_used ), 2 ); ?></div>
<div class="text-muted small"><?php esc_html_e( 'Remaining', 'wp-agentic-writer' ); ?></div>
</div>
</div>
</div>
<!-- Budget Input -->
<div class="row g-3">
<div class="col-md-6">
<label for="monthly_budget" class="form-label fw-semibold"><?php esc_html_e( 'Monthly Budget (USD)', 'wp-agentic-writer' ); ?></label>
<div class="input-group">
<span class="input-group-text">$</span>
<input type="number" class="form-control" id="monthly_budget" name="wp_agentic_writer_settings[monthly_budget]" value="<?php echo esc_attr( $monthly_budget ); ?>" min="0" step="0.01" />
</div>
<div class="form-text"><?php esc_html_e( 'Maximum spend per month. Set to 0 for unlimited.', 'wp-agentic-writer' ); ?></div>
</div>
<div class="col-md-6">
<label class="form-label fw-semibold"><?php esc_html_e( 'OpenRouter Cost Tracking', 'wp-agentic-writer' ); ?></label>
<div class="form-check form-switch d-flex align-items-center gap-2">
<input class="form-check-input" type="checkbox" id="cost_tracking_enabled" name="wp_agentic_writer_settings[cost_tracking_enabled]" value="1" <?php checked( $cost_tracking_enabled ); ?> />
<label class="form-check-label" for="cost_tracking_enabled">
<?php esc_html_e( 'Enable cost tracking in editor sidebar', 'wp-agentic-writer' ); ?>
</label>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Research & Web Search -->
<div class="col-12">
<div class="card border-0 ">
<div class="card-header border-bottom-0 pt-3">
<div class="d-flex align-items-center">
<div>
<h5 class="card-title mb-1 d-flex align-items-center gap-2"><i class="bi bi-search text-warning"></i><?php esc_html_e( 'Research & Web Search', 'wp-agentic-writer' ); ?></h5>
<p class="text-muted small mb-0"><?php esc_html_e( 'When enabled, the plugin auto-selects the search method based on your active provider.', 'wp-agentic-writer' ); ?></p>
</div>
</div>
</div>
<div class="card-body">
<div class="row g-3">
<div class="col-12">
<div class="form-check form-switch d-flex align-items-center gap-2">
<input class="form-check-input" type="checkbox" id="web_search_enabled" name="wp_agentic_writer_settings[web_search_enabled]" value="1" <?php checked( $web_search_enabled ); ?> />
<label class="form-check-label" for="web_search_enabled">
<?php esc_html_e( 'Enable Web Search (default for new posts)', 'wp-agentic-writer' ); ?>
</label>
</div>
<div class="form-text"><?php esc_html_e( 'Can also be toggled per-request in the editor sidebar.', 'wp-agentic-writer' ); ?></div>
</div>
<div class="col-md-6">
<label for="search_depth" class="form-label fw-semibold"><?php esc_html_e( 'Search Depth', 'wp-agentic-writer' ); ?></label>
<select class="form-select" id="search_depth" name="wp_agentic_writer_settings[search_depth]">
<option value="low" <?php selected( $search_depth, 'low' ); ?>><?php esc_html_e( 'Low (Basic queries)', 'wp-agentic-writer' ); ?></option>
<option value="medium" <?php selected( $search_depth, 'medium' ); ?>><?php esc_html_e( 'Medium (General queries)', 'wp-agentic-writer' ); ?></option>
<option value="high" <?php selected( $search_depth, 'high' ); ?>><?php esc_html_e( 'High (Detailed research)', 'wp-agentic-writer' ); ?></option>
</select>
</div>
</div>
<!-- Two-column: OpenRouter vs Brave -->
<div class="row g-3 mt-4 border-top pt-4 border-secondary border-opacity-25">
<!-- Left Column: OpenRouter Search -->
<div class="col-md-6">
<div class="p-3 border rounded" style="border-color: rgba(255,255,255,.1) !important">
<h6 class="fw-semibold mb-1 d-flex align-items-center gap-2">
<span class="badge text-bg-primary">OpenRouter</span>
<?php esc_html_e( 'Search Engine', 'wp-agentic-writer' ); ?>
</h6>
<p class="text-muted small mb-2"><?php esc_html_e( 'Used when the active model is routed through OpenRouter.', 'wp-agentic-writer' ); ?></p>
<select class="form-select" id="search_engine" name="wp_agentic_writer_settings[search_engine]">
<option value="auto" <?php selected( $search_engine, 'auto' ); ?>><?php esc_html_e( 'Auto (Native → Exa fallback)', 'wp-agentic-writer' ); ?></option>
<option value="native" <?php selected( $search_engine, 'native' ); ?>><?php esc_html_e( 'Native (Free, built-in)', 'wp-agentic-writer' ); ?></option>
<option value="exa" <?php selected( $search_engine, 'exa' ); ?>><?php esc_html_e( 'Exa (Paid, ~$0.02/search)', 'wp-agentic-writer' ); ?></option>
</select>
</div>
</div>
<!-- Right Column: Brave Search -->
<div class="col-md-6">
<div class="p-3 border rounded" style="border-color: rgba(255,255,255,.1) !important">
<h6 class="fw-semibold mb-1 d-flex align-items-center gap-2">
<span class="badge text-bg-success">Local / Codex</span>
<?php esc_html_e( 'Brave Search API', 'wp-agentic-writer' ); ?>
</h6>
<p class="text-muted small mb-2"><?php esc_html_e( 'Used automatically when the active model is Local Backend or Codex.', 'wp-agentic-writer' ); ?></p>
<input type="password" class="form-control" id="brave_search_api_key" name="wp_agentic_writer_settings[brave_search_api_key]" value="<?php echo esc_attr( $brave_search_api_key ); ?>" placeholder="BSA...">
<div class="form-text mt-2">
<?php printf( wp_kses_post( __( '<a href="%s" target="_blank" class="text-info text-decoration-none border-bottom border-info">Get free API Key</a> — 2,000 requests/month on the free tier.', 'wp-agentic-writer' ) ), 'https://brave.com/search/api/' ); ?>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Clarification Quiz -->
<div class="col-12">
<div class="card border-0 ">
<div class="card-header border-bottom-0 pt-3">
<div class="d-flex align-items-center">
<div>
<h5 class="card-title mb-1 d-flex align-items-center gap-2"><i class="bi bi-question-circle text-warning"></i><?php esc_html_e( 'Clarification Quiz', 'wp-agentic-writer' ); ?></h5>
<p class="text-muted small mb-0"><?php esc_html_e( 'Gather context before writing for better results', 'wp-agentic-writer' ); ?></p>
</div>
</div>
</div>
<div class="card-body">
<div class="row g-3">
<div class="col-12">
<div class="form-check form-switch d-flex align-items-center gap-2">
<input class="form-check-input" type="checkbox" id="enable_clarification_quiz" name="wp_agentic_writer_settings[enable_clarification_quiz]" value="1" <?php checked( $enable_clarification_quiz ); ?> />
<label class="form-check-label" for="enable_clarification_quiz">
<?php esc_html_e( 'Ask clarifying questions when context is missing', 'wp-agentic-writer' ); ?>
</label>
</div>
</div>
<div class="col-md-6">
<label for="clarity_confidence_threshold" class="form-label fw-semibold"><?php esc_html_e( 'Confidence Threshold', 'wp-agentic-writer' ); ?></label>
<select class="form-select" id="clarity_confidence_threshold" name="wp_agentic_writer_settings[clarity_confidence_threshold]">
<option value="0.5" <?php selected( $clarity_confidence_threshold, '0.5' ); ?>><?php esc_html_e( 'Very Sensitive (50%)', 'wp-agentic-writer' ); ?></option>
<option value="0.6" <?php selected( $clarity_confidence_threshold, '0.6' ); ?>><?php esc_html_e( 'Sensitive (60%) - Recommended', 'wp-agentic-writer' ); ?></option>
<option value="0.7" <?php selected( $clarity_confidence_threshold, '0.7' ); ?>><?php esc_html_e( 'Balanced (70%)', 'wp-agentic-writer' ); ?></option>
<option value="0.8" <?php selected( $clarity_confidence_threshold, '0.8' ); ?>><?php esc_html_e( 'Strict (80%)', 'wp-agentic-writer' ); ?></option>
<option value="0.9" <?php selected( $clarity_confidence_threshold, '0.9' ); ?>><?php esc_html_e( 'Very Strict (90%)', 'wp-agentic-writer' ); ?></option>
</select>
<div class="form-text"><?php esc_html_e( 'When to trigger the clarification quiz', 'wp-agentic-writer' ); ?></div>
</div>
<div class="col-md-6">
<label class="form-label fw-semibold"><?php esc_html_e( 'Context Categories', 'wp-agentic-writer' ); ?></label>
<div class="border rounded p-3" style="max-height: 200px; overflow-y: auto;">
<?php
$categories = array(
'target_outcome' => __( 'Target Outcome', 'wp-agentic-writer' ),
'target_audience' => __( 'Target Audience', 'wp-agentic-writer' ),
'tone' => __( 'Tone of Voice', 'wp-agentic-writer' ),
'content_depth' => __( 'Content Depth', 'wp-agentic-writer' ),
'expertise_level' => __( 'Expertise Level', 'wp-agentic-writer' ),
'content_type' => __( 'Content Type', 'wp-agentic-writer' ),
'pov' => __( 'Point of View', 'wp-agentic-writer' ),
);
foreach ( $categories as $value => $label ) :
?>
<div class="form-check d-flex align-items-center gap-2">
<input class="form-check-input" type="checkbox" id="cat_<?php echo esc_attr( $value ); ?>" name="wp_agentic_writer_settings[required_context_categories][]" value="<?php echo esc_attr( $value ); ?>" <?php checked( in_array( $value, $required_context_categories, true ) ); ?> />
<label class="form-check-label" for="cat_<?php echo esc_attr( $value ); ?>"><?php echo esc_html( $label ); ?></label>
</div>
<?php endforeach; ?>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Content Settings / Language -->
<div class="col-12">
<div class="card border-0 ">
<div class="card-header border-bottom-0 pt-3">
<div class="d-flex align-items-center">
<div>
<h5 class="card-title mb-1 d-flex align-items-center gap-2"><i class="bi bi-globe text-warning"></i><?php esc_html_e( 'Content Settings', 'wp-agentic-writer' ); ?></h5>
<p class="text-muted small mb-0"><?php esc_html_e( 'Configure language preferences for your content', 'wp-agentic-writer' ); ?></p>
</div>
</div>
</div>
<div class="card-body">
<div class="row g-3">
<div class="col-12">
<label class="form-label fw-semibold"><?php esc_html_e( 'Preferred Languages', 'wp-agentic-writer' ); ?></label>
<div class="row row-cols-2 row-cols-md-4 g-2">
<?php foreach ( $available_languages as $code => $label ) : ?>
<div class="col">
<div class="form-check d-flex align-items-center gap-2">
<input class="form-check-input" type="checkbox" id="lang_<?php echo esc_attr( $code ); ?>" name="wp_agentic_writer_settings[preferred_languages][]" value="<?php echo esc_attr( $code ); ?>" <?php checked( in_array( $code, $preferred_languages, true ) ); ?> />
<label class="form-check-label small" for="lang_<?php echo esc_attr( $code ); ?>"><?php echo esc_html( $label ); ?></label>
</div>
</div>
<?php endforeach; ?>
</div>
<div class="form-text mt-2"><?php esc_html_e( 'Select which languages will appear in the language selector when creating articles.', 'wp-agentic-writer' ); ?></div>
</div>
<div class="col-12">
<label class="form-label fw-semibold"><?php esc_html_e( 'Custom Languages', 'wp-agentic-writer' ); ?></label>
<div id="wpaw-custom-languages-list">
<?php if ( ! empty( $custom_languages ) ) : ?>
<?php foreach ( $custom_languages as $lang ) : ?>
<div class="input-group mb-2 wpaw-custom-language-item">
<input type="text" class="form-control" name="wp_agentic_writer_settings[custom_languages][]" value="<?php echo esc_attr( $lang ); ?>" placeholder="<?php esc_attr_e( 'e.g., Betawi, Minangkabau', 'wp-agentic-writer' ); ?>" />
<button type="button" class="btn btn-outline-danger wpaw-remove-language">
<span class="dashicons dashicons-no-alt"></span>
</button>
</div>
<?php endforeach; ?>
<?php endif; ?>
</div>
<button type="button" id="wpaw-add-custom-language" class="btn btn-outline-secondary btn-sm">
<span class="dashicons dashicons-plus-alt2 me-1"></span>
<?php esc_html_e( 'Add Custom Language', 'wp-agentic-writer' ); ?>
</button>
<div class="form-text mt-2"><?php esc_html_e( 'Add any language not listed above (e.g., regional dialects, minority languages).', 'wp-agentic-writer' ); ?></div>
</div>
</div>
</div>
</div>
</div>
<!-- Advanced Settings -->
<div class="col-12">
<div class="card border-0 ">
<div class="card-header border-bottom-0 pt-3">
<div class="d-flex align-items-center">
<div>
<h5 class="card-title mb-1 d-flex align-items-center gap-2"><i class="bi bi-gear text-warning"></i><?php esc_html_e( 'Advanced Settings', 'wp-agentic-writer' ); ?></h5>
<p class="text-muted small mb-0"><?php esc_html_e( 'Additional configuration options', 'wp-agentic-writer' ); ?></p>
</div>
</div>
</div>
<div class="card-body">
<div class="row g-3">
<div class="col-12">
<div class="form-check form-switch d-flex align-items-center gap-2">
<input class="form-check-input" type="checkbox" id="enable_faq_schema" name="wp_agentic_writer_settings[enable_faq_schema]" value="1" <?php checked( $enable_faq_schema ?? false ); ?> />
<label class="form-check-label" for="enable_faq_schema">
<?php esc_html_e( 'Enable Automated FAQ Schema (Optional)', 'wp-agentic-writer' ); ?>
</label>
</div>
<div class="form-text"><?php esc_html_e( 'Automatically injects FAQPage JSON-LD into posts when Q&A headings are detected. Compatible with Yoast SEO and RankMath. Disable if your SEO plugin already handles FAQ schema.', 'wp-agentic-writer' ); ?></div>
</div>
<div class="col-md-6">
<label for="chat_history_limit" class="form-label fw-semibold"><?php esc_html_e( 'Chat History Limit', 'wp-agentic-writer' ); ?></label>
<input type="number" class="form-control" id="chat_history_limit" name="wp_agentic_writer_settings[chat_history_limit]" value="<?php echo esc_attr( $chat_history_limit ); ?>" min="0" max="200" style="max-width: 120px;" />
<div class="form-text"><?php esc_html_e( 'Messages stored per post. Set to 0 to disable chat history.', 'wp-agentic-writer' ); ?></div>
</div>
</div>
</div>
</div>
</div>
</div>

View File

@@ -1,229 +0,0 @@
<?php
/**
* Settings Tab: Model Guide
*
* @package WP_Agentic_Writer
*/
if ( ! defined( 'ABSPATH' ) ) {
exit;
}
?>
<div class="row g-4">
<!-- How Models Are Used -->
<div class="col-12">
<div class="card border-0 ">
<div class="card-header border-bottom-0 pt-4 pb-0">
<div class="d-flex align-items-center">
<span class="me-3 fs-4">📖</span>
<div>
<h5 class="card-title mb-1"><?php esc_html_e( 'How AI Models Are Used', 'wp-agentic-writer' ); ?></h5>
<p class="text-muted small mb-0"><?php esc_html_e( 'Understanding which model handles each task', 'wp-agentic-writer' ); ?></p>
</div>
</div>
</div>
<div class="card-body p-0">
<div class="table-responsive">
<table class="table table-hover mb-0">
<thead class="table-light">
<tr>
<th class="px-3"><?php esc_html_e( 'Task', 'wp-agentic-writer' ); ?></th>
<th><?php esc_html_e( 'Model Used', 'wp-agentic-writer' ); ?></th>
<th><?php esc_html_e( 'Est. Cost', 'wp-agentic-writer' ); ?></th>
<th class="px-3"><?php esc_html_e( 'Description', 'wp-agentic-writer' ); ?></th>
</tr>
</thead>
<tbody>
<tr>
<td class="px-3 fw-semibold"><?php esc_html_e( 'Planning', 'wp-agentic-writer' ); ?></td>
<td><span class="badge bg-info-subtle text-info"><?php esc_html_e( 'Planning Model', 'wp-agentic-writer' ); ?></span></td>
<td class="text-muted">~$0.001</td>
<td class="px-3 small text-muted"><?php esc_html_e( 'Creates article outline with sections and structure', 'wp-agentic-writer' ); ?></td>
</tr>
<tr>
<td class="px-3 fw-semibold"><?php esc_html_e( 'Clarity Check', 'wp-agentic-writer' ); ?></td>
<td><span class="badge bg-secondary-subtle text-secondary"><?php esc_html_e( 'Clarity Model', 'wp-agentic-writer' ); ?></span></td>
<td class="text-muted">~$0.0005</td>
<td class="px-3 small text-muted"><?php esc_html_e( 'Analyzes your prompt and asks clarifying questions', 'wp-agentic-writer' ); ?></td>
</tr>
<tr class="table-primary">
<td class="px-3 fw-semibold"><?php esc_html_e( 'Writing', 'wp-agentic-writer' ); ?></td>
<td><span class="badge bg-primary"><?php esc_html_e( 'Writing Model', 'wp-agentic-writer' ); ?></span></td>
<td class="text-muted">~$0.05-0.15</td>
<td class="px-3 small text-muted"><?php esc_html_e( 'Generates full article content section by section', 'wp-agentic-writer' ); ?></td>
</tr>
<tr>
<td class="px-3 fw-semibold"><?php esc_html_e( 'Chat', 'wp-agentic-writer' ); ?></td>
<td><span class="badge bg-success-subtle text-success"><?php esc_html_e( 'Chat Model', 'wp-agentic-writer' ); ?></span></td>
<td class="text-muted">~$0.001</td>
<td class="px-3 small text-muted"><?php esc_html_e( 'Answers questions and provides quick assistance', 'wp-agentic-writer' ); ?></td>
</tr>
<tr>
<td class="px-3 fw-semibold"><?php esc_html_e( 'Block Refinement', 'wp-agentic-writer' ); ?></td>
<td><span class="badge bg-warning-subtle text-warning"><?php esc_html_e( 'Refinement Model', 'wp-agentic-writer' ); ?></span></td>
<td class="text-muted">~$0.01-0.03</td>
<td class="px-3 small text-muted"><?php esc_html_e( 'Improves or rewrites selected content blocks', 'wp-agentic-writer' ); ?></td>
</tr>
<tr>
<td class="px-3 fw-semibold"><?php esc_html_e( 'Web Search', 'wp-agentic-writer' ); ?></td>
<td><span class="badge bg-dark-subtle text-dark"><?php esc_html_e( 'OpenRouter Plugin', 'wp-agentic-writer' ); ?></span></td>
<td class="text-muted">~$0.02</td>
<td class="px-3 small text-muted"><?php esc_html_e( 'Searches web for current information (toggle in sidebar)', 'wp-agentic-writer' ); ?></td>
</tr>
<tr>
<td class="px-3 fw-semibold"><?php esc_html_e( 'Image Generation', 'wp-agentic-writer' ); ?></td>
<td><span class="badge bg-danger-subtle text-danger"><?php esc_html_e( 'Image Model', 'wp-agentic-writer' ); ?></span></td>
<td class="text-muted">$0.003-0.04</td>
<td class="px-3 small text-muted"><?php esc_html_e( 'Creates images for articles', 'wp-agentic-writer' ); ?></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<!-- Recommended Models -->
<div class="col-12">
<div class="card border-0 ">
<div class="card-header border-bottom-0 pt-4 pb-0">
<div class="d-flex align-items-center">
<span class="me-3 fs-4">⭐</span>
<div>
<h5 class="card-title mb-1"><?php esc_html_e( 'Recommended Models', 'wp-agentic-writer' ); ?></h5>
<p class="text-muted small mb-0"><?php esc_html_e( 'Best models for each purpose based on quality and cost', 'wp-agentic-writer' ); ?></p>
</div>
</div>
</div>
<div class="card-body p-0">
<div class="table-responsive">
<table class="table table-hover mb-0">
<thead class="table-light">
<tr>
<th class="px-3"><?php esc_html_e( 'Model', 'wp-agentic-writer' ); ?></th>
<th><?php esc_html_e( 'Best For', 'wp-agentic-writer' ); ?></th>
<th><?php esc_html_e( 'Cost (per 1M tokens)', 'wp-agentic-writer' ); ?></th>
<th class="px-3"><?php esc_html_e( 'Notes', 'wp-agentic-writer' ); ?></th>
</tr>
</thead>
<tbody>
<tr class="table-success">
<td class="px-3 fw-semibold">Gemini 2.5 Flash</td>
<td><?php esc_html_e( 'Chat, Clarity, Planning', 'wp-agentic-writer' ); ?></td>
<td><code>$0.15 / $0.60</code></td>
<td class="px-3 small">⭐ <?php esc_html_e( 'Best balanced option. Fast reasoning.', 'wp-agentic-writer' ); ?></td>
</tr>
<tr>
<td class="px-3 fw-semibold">Gemini 3 Flash Preview</td>
<td><?php esc_html_e( 'Chat, Clarity, Planning (Premium)', 'wp-agentic-writer' ); ?></td>
<td><code>$0.50 / $3.00</code></td>
<td class="px-3 small">🏆 <?php esc_html_e( 'Latest Gemini. Near Pro performance.', 'wp-agentic-writer' ); ?></td>
</tr>
<tr class="table-primary">
<td class="px-3 fw-semibold">Claude 3.5 Sonnet</td>
<td><?php esc_html_e( 'Writing, Refinement', 'wp-agentic-writer' ); ?></td>
<td><code>$3.00 / $15.00</code></td>
<td class="px-3 small">⭐ <?php esc_html_e( 'Best quality writing. Recommended.', 'wp-agentic-writer' ); ?></td>
</tr>
<tr>
<td class="px-3 fw-semibold">Mistral Small Creative</td>
<td><?php esc_html_e( 'Writing (Budget)', 'wp-agentic-writer' ); ?></td>
<td><code>$0.10 / $0.30</code></td>
<td class="px-3 small">💰 <?php esc_html_e( 'Best budget writing. Creative style.', 'wp-agentic-writer' ); ?></td>
</tr>
<tr>
<td class="px-3 fw-semibold">GPT-4.1</td>
<td><?php esc_html_e( 'Writing, Refinement (Premium)', 'wp-agentic-writer' ); ?></td>
<td><code>$2.00 / $8.00</code></td>
<td class="px-3 small">🏆 <?php esc_html_e( 'Premium option. Excellent instruction following.', 'wp-agentic-writer' ); ?></td>
</tr>
<tr>
<td class="px-3 fw-semibold">Claude Sonnet 4</td>
<td><?php esc_html_e( 'Clarity (Premium)', 'wp-agentic-writer' ); ?></td>
<td><code>$3.00 / $15.00</code></td>
<td class="px-3 small">🏆 <?php esc_html_e( 'Latest Claude. Deep analysis.', 'wp-agentic-writer' ); ?></td>
</tr>
<tr class="table-warning">
<td class="px-3 fw-semibold">GPT-4o</td>
<td><?php esc_html_e( 'Image Prompts', 'wp-agentic-writer' ); ?></td>
<td><code>$2.50 / $10.00</code></td>
<td class="px-3 small">⭐ <?php esc_html_e( 'Generates image descriptions for prompts.', 'wp-agentic-writer' ); ?></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<!-- Cost Examples -->
<div class="col-12">
<div class="card border-0 ">
<div class="card-header border-bottom-0 pt-4 pb-0">
<div class="d-flex align-items-center">
<span class="me-3 fs-4">💡</span>
<div>
<h5 class="card-title mb-1"><?php esc_html_e( 'Cost Examples', 'wp-agentic-writer' ); ?></h5>
<p class="text-muted small mb-0"><?php esc_html_e( 'Real-world cost estimates for common tasks', 'wp-agentic-writer' ); ?></p>
</div>
</div>
</div>
<div class="card-body">
<div class="row g-3">
<!-- Single Article -->
<div class="col-md-4">
<div class="card h-100 border">
<div class="card-body">
<h6 class="card-title"><?php esc_html_e( 'Single Article (Balanced)', 'wp-agentic-writer' ); ?></h6>
<ul class="list-unstyled small text-muted mb-3">
<li><?php esc_html_e( 'Clarity Check', 'wp-agentic-writer' ); ?>: ~$0.001</li>
<li><?php esc_html_e( 'Planning', 'wp-agentic-writer' ); ?>: ~$0.001</li>
<li><?php esc_html_e( 'Writing (5 sections)', 'wp-agentic-writer' ); ?>: ~$0.10</li>
<li><?php esc_html_e( '1 Image', 'wp-agentic-writer' ); ?>: ~$0.003</li>
</ul>
<div class="d-flex justify-content-between align-items-center border-top pt-2">
<span class="text-muted"><?php esc_html_e( 'Total', 'wp-agentic-writer' ); ?></span>
<span class="fs-5 fw-bold text-primary">~$0.10-0.15</span>
</div>
</div>
</div>
</div>
<!-- 10 Articles/Month -->
<div class="col-md-4">
<div class="card h-100 border">
<div class="card-body">
<h6 class="card-title"><?php esc_html_e( '10 Articles/Month (Balanced)', 'wp-agentic-writer' ); ?></h6>
<ul class="list-unstyled small text-muted mb-3">
<li><?php esc_html_e( '10 articles × $0.15', 'wp-agentic-writer' ); ?></li>
<li><?php esc_html_e( 'Some chat interactions', 'wp-agentic-writer' ); ?>: ~$0.05</li>
<li><?php esc_html_e( 'Refinements', 'wp-agentic-writer' ); ?>: ~$0.20</li>
</ul>
<div class="d-flex justify-content-between align-items-center border-top pt-2">
<span class="text-muted"><?php esc_html_e( 'Total', 'wp-agentic-writer' ); ?></span>
<span class="fs-5 fw-bold text-primary">~$1.50-2.00</span>
</div>
</div>
</div>
</div>
<!-- With Web Search -->
<div class="col-md-4">
<div class="card h-100 border">
<div class="card-body">
<h6 class="card-title"><?php esc_html_e( 'With Web Search', 'wp-agentic-writer' ); ?></h6>
<ul class="list-unstyled small text-muted mb-3">
<li><?php esc_html_e( 'Add ~$0.02 per search request', 'wp-agentic-writer' ); ?></li>
<li><?php esc_html_e( 'Typical: 1-2 searches per article', 'wp-agentic-writer' ); ?></li>
</ul>
<div class="d-flex justify-content-between align-items-center border-top pt-2">
<span class="text-muted"><?php esc_html_e( 'Extra', 'wp-agentic-writer' ); ?></span>
<span class="fs-5 fw-bold text-warning">~$0.02-0.04</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

View File

@@ -1,429 +0,0 @@
<?php
/**
* Settings Tab: Local Backend
*
* @package WP_Agentic_Writer
* @var string $local_backend_url
* @var string $local_backend_key
* @var string $local_backend_model
* @var bool $local_backend_enabled
*/
if ( ! defined( 'ABSPATH' ) ) {
exit;
}
?>
<div class="row g-4">
<!-- Download Package -->
<div class="col-12">
<div class="card border-0">
<div class="card-header border-bottom-0 pt-3">
<div class="d-flex align-items-center">
<div>
<h5 class="card-title mb-1 d-flex align-items-center gap-2">
<i class="bi bi-download text-primary"></i>
<?php esc_html_e( 'Step 1: Download Local Backend Package', 'wp-agentic-writer' ); ?>
</h5>
<p class="text-muted small mb-0">
<?php esc_html_e( 'Run AI inference on your own machine with your Claude CLI + Z.ai account', 'wp-agentic-writer' ); ?>
</p>
</div>
</div>
</div>
<div class="card-body">
<p class="mb-3">
<?php esc_html_e( 'Download the Local Backend proxy to run on your development machine. This allows unlimited, private AI content generation using your existing Claude CLI setup.', 'wp-agentic-writer' ); ?>
</p>
<a href="https://downloads.wpagentic.dev/wp-agentic-writer/agentic-writer-local-backend.zip"
class="btn btn-primary btn-lg" target="_blank" rel="noopener">
<i class="bi bi-download me-2"></i>
<?php esc_html_e( 'Download Local Backend v1.1.0', 'wp-agentic-writer' ); ?>
</a>
<details class="mt-3">
<summary class="fw-semibold" style="cursor: pointer;">
<?php esc_html_e( 'Prerequisites', 'wp-agentic-writer' ); ?>
</summary>
<ul class="mt-2">
<li>
✅ <strong><?php esc_html_e( 'Claude CLI', 'wp-agentic-writer' ); ?></strong> -
<?php esc_html_e( 'Get from', 'wp-agentic-writer' ); ?>
<a href="https://claude.ai/code" target="_blank">claude.ai/code</a>
<?php esc_html_e( 'or', 'wp-agentic-writer' ); ?>
<a href="https://z.ai" target="_blank">z.ai</a>
</li>
<li>
✅ <strong><?php esc_html_e( 'Node.js 18+', 'wp-agentic-writer' ); ?></strong> -
<a href="https://nodejs.org" target="_blank"><?php esc_html_e( 'Download', 'wp-agentic-writer' ); ?></a>
</li>
<li>
✅ <strong><?php esc_html_e( 'Z.ai Coding Plan or Anthropic API key', 'wp-agentic-writer' ); ?></strong> -
<?php esc_html_e( 'Configured in Claude CLI', 'wp-agentic-writer' ); ?>
</li>
</ul>
</details>
</div>
</div>
</div>
<!-- Configuration -->
<div class="col-12">
<div class="card border-0 ">
<div class="card-header border-bottom-0 pt-3">
<div class="d-flex align-items-center">
<div>
<h5 class="card-title mb-1 d-flex align-items-center gap-2">
<i class="bi bi-gear-fill text-success"></i>
<?php esc_html_e( 'Step 2: Configure Connection', 'wp-agentic-writer' ); ?>
</h5>
<p class="text-muted small mb-0">
<?php esc_html_e( 'After starting the proxy, enter the connection details here', 'wp-agentic-writer' ); ?>
</p>
</div>
</div>
</div>
<div class="card-body">
<div class="mb-3">
<label for="local_backend_url" class="form-label fw-semibold">
<?php esc_html_e( 'Base URL', 'wp-agentic-writer' ); ?>
<span class="text-danger ms-2">*</span>
</label>
<input type="url"
class="form-control"
id="local_backend_url"
name="wp_agentic_writer_settings[local_backend_url]"
value="<?php echo esc_attr( $local_backend_url ); ?>"
placeholder="http://192.168.1.105:8080">
<div class="form-text">
<?php esc_html_e( 'Enter the URL from your Local Backend startup message (e.g., http://YOUR-IP:8080)', 'wp-agentic-writer' ); ?>
</div>
</div>
<div class="mb-3">
<label for="local_backend_key" class="form-label fw-semibold">
<?php esc_html_e( 'API Key', 'wp-agentic-writer' ); ?>
</label>
<input type="text"
class="form-control"
id="local_backend_key"
name="wp_agentic_writer_settings[local_backend_key]"
value="<?php echo esc_attr( $local_backend_key ); ?>"
placeholder="dummy">
<div class="form-text">
<?php esc_html_e( 'Use "dummy" for local backend (ignored by proxy)', 'wp-agentic-writer' ); ?>
</div>
</div>
<div class="mb-3">
<label for="local_backend_model" class="form-label fw-semibold">
<?php esc_html_e( 'Model', 'wp-agentic-writer' ); ?>
</label>
<input type="text"
class="form-control"
id="local_backend_model"
name="wp_agentic_writer_settings[local_backend_model]"
value="<?php echo esc_attr( $local_backend_model ); ?>"
placeholder="claude-local">
<div class="form-text">
<?php esc_html_e( 'Model identifier (informational only, proxy uses your Claude CLI default)', 'wp-agentic-writer' ); ?>
</div>
</div>
<div class="d-flex gap-2 align-items-center">
<button type="button" id="test-local-backend" class="btn btn-outline-primary">
<i class="bi bi-plug me-2"></i>
<?php esc_html_e( 'Test Connection', 'wp-agentic-writer' ); ?>
</button>
<span id="connection-status" class="ms-2"></span>
</div>
</div>
</div>
</div>
<!-- Task Routing (Optional) -->
<div class="col-12">
<div class="card border-0 ">
<div class="card-header border-bottom-0 pt-3">
<div class="d-flex align-items-center">
<div>
<h5 class="card-title mb-1 d-flex align-items-center gap-2">
<i class="bi bi-diagram-3 text-warning"></i>
<?php esc_html_e( 'Step 3: Provider Routing (Advanced)', 'wp-agentic-writer' ); ?>
</h5>
<p class="text-muted small mb-0">
<?php esc_html_e( 'Choose which provider to use for each task type', 'wp-agentic-writer' ); ?>
</p>
</div>
</div>
</div>
<div class="card-body">
<div class="alert alert-info mb-3">
<i class="bi bi-info-circle me-2"></i>
<strong><?php esc_html_e( 'Recommended Setup:', 'wp-agentic-writer' ); ?></strong>
<?php esc_html_e( 'Use Local Backend for all text tasks (free, fast, private). Use OpenRouter for images (only option).', 'wp-agentic-writer' ); ?>
</div>
<?php
$task_types = array(
'chat' => __( 'Chat & Discussion', 'wp-agentic-writer' ),
'clarity' => __( 'Clarity Check & Quiz', 'wp-agentic-writer' ),
'planning' => __( 'Outline Planning', 'wp-agentic-writer' ),
'writing' => __( 'Article Writing', 'wp-agentic-writer' ),
'refinement' => __( 'Content Refinement', 'wp-agentic-writer' ),
'image' => __( 'Image Generation', 'wp-agentic-writer' ),
);
$task_providers = $settings['task_providers'] ?? array();
?>
<table class="table">
<thead>
<tr>
<th><?php esc_html_e( 'Task Type', 'wp-agentic-writer' ); ?></th>
<th><?php esc_html_e( 'Provider', 'wp-agentic-writer' ); ?></th>
</tr>
</thead>
<tbody>
<?php foreach ( $task_types as $task_key => $task_label ) : ?>
<tr>
<td><?php echo esc_html( $task_label ); ?></td>
<td>
<select class="form-select form-select-sm"
name="wp_agentic_writer_settings[task_providers][<?php echo esc_attr( $task_key ); ?>]">
<?php
$current_provider = $task_providers[ $task_key ] ?? 'openrouter';
// Available providers per task
$providers = array(
'openrouter' => '☁️ OpenRouter (Cloud)',
);
// Add local backend for text tasks
if ( 'image' !== $task_key ) {
$providers['local_backend'] = '🏠 Local Backend (Free)';
$providers['codex'] = '🔗 Codex (OpenAI)';
}
foreach ( $providers as $provider_key => $provider_label ) :
?>
<option value="<?php echo esc_attr( $provider_key ); ?>"
<?php selected( $current_provider, $provider_key ); ?>>
<?php echo esc_html( $provider_label ); ?>
</option>
<?php endforeach; ?>
</select>
</td>
</tr>
<?php endforeach; ?>
</tbody>
</table>
<div class="form-check mt-3">
<input class="form-check-input" type="checkbox" id="wpaw-allow-openrouter-fallback"
name="wp_agentic_writer_settings[allow_openrouter_fallback]" value="1"
<?php checked( ! empty( $allow_openrouter_fallback ) ); ?> />
<label class="form-check-label" for="wpaw-allow-openrouter-fallback">
<?php esc_html_e( 'Allow automatic fallback to OpenRouter when selected provider fails', 'wp-agentic-writer' ); ?>
</label>
<div class="form-text text-warning">
<?php esc_html_e( 'Off by default to prevent unexpected OpenRouter charges.', 'wp-agentic-writer' ); ?>
</div>
</div>
</div>
</div>
</div>
<!-- Brave Search Configuration -->
<div class="col-12">
<div class="card border-0 border-primary">
<div class="card-header border-bottom-0 pt-3">
<div class="d-flex align-items-center">
<div>
<h5 class="card-title mb-1 d-flex align-items-center gap-2">
<i class="bi bi-search text-primary"></i>
<?php esc_html_e( 'Step 4: Enable Web Search (Optional)', 'wp-agentic-writer' ); ?>
</h5>
<p class="text-muted small mb-0">
<?php esc_html_e( 'Add Brave Search capability to your local backend for real-time web research', 'wp-agentic-writer' ); ?>
</p>
</div>
</div>
</div>
<div class="card-body">
<div class="alert alert-info mb-3">
<i class="bi bi-info-circle me-2"></i>
<strong><?php esc_html_e( 'Requirements:', 'wp-agentic-writer' ); ?></strong>
<?php esc_html_e( 'You need a Brave Search API key (free tier available at', 'wp-agentic-writer' ); ?>
<a href="https://brave.com/search/api/" target="_blank">brave.com/search/api</a>)
</div>
<div class="mb-3">
<label class="form-label fw-semibold">
<?php esc_html_e( '1. Get Brave API Key (if not already configured in General tab)', 'wp-agentic-writer' ); ?>
</label>
<p class="text-muted small">
<?php esc_html_e( 'The API key you configured in Agentic Writer → Settings → General → Search will also be used by the local backend.', 'wp-agentic-writer' ); ?>
</p>
</div>
<div class="mb-3">
<label class="form-label fw-semibold">
<?php esc_html_e( '2. Add API Key to Local Backend Proxy', 'wp-agentic-writer' ); ?>
</label>
<?php
$brave_api_key = $settings['brave_search_api_key'] ?? '';
$masked_key = $brave_api_key ? substr($brave_api_key, 0, 8) . '...' . substr($brave_api_key, -4) : '';
?>
<?php if ( $brave_api_key ) : ?>
<p class="text-muted small mb-2">
<?php esc_html_e( 'Navigate to your extracted folder, then run:', 'wp-agentic-writer' ); ?>
</p>
<div class="d-flex align-items-center gap-2">
<code id="brave-env-command">echo 'BRAVE_SEARCH_API_KEY="<?php echo esc_attr( $brave_api_key ); ?>"' > .env</code>
<button type="button" class="btn btn-sm btn-outline-light" onclick="copyToClipboard(document.getElementById('brave-env-command').textContent)">
<i class="bi bi-clipboard"></i>
</button>
</div>
<?php else : ?>
<div class="alert alert-warning mb-2">
<i class="bi bi-exclamation-triangle me-2"></i>
<?php esc_html_e( 'Brave API key not configured. Add it in Agentic Writer → Settings → General → Search section first.', 'wp-agentic-writer' ); ?>
</div>
<?php endif; ?>
</div>
<div class="mb-3">
<label class="form-label fw-semibold">
<?php esc_html_e( '3. Restart the Proxy', 'wp-agentic-writer' ); ?>
</label>
<div class="d-flex align-items-center gap-2">
<code id="restart-proxy-command">./stop-proxy.sh && ./start-proxy.sh</code>
<button type="button" class="btn btn-sm btn-outline-light" onclick="copyToClipboard(document.getElementById('restart-proxy-command').textContent)">
<i class="bi bi-clipboard"></i>
</button>
</div>
</div>
<div class="alert alert-success">
<i class="bi bi-check-circle me-2"></i>
<strong><?php esc_html_e( 'Verification:', 'wp-agentic-writer' ); ?></strong>
<?php esc_html_e( 'When the proxy starts, you should see "Brave Search: ✅ CONFIGURED" in the output.', 'wp-agentic-writer' ); ?>
</div>
<p class="text-muted small mb-0">
<strong><?php esc_html_e( 'Note:', 'wp-agentic-writer' ); ?></strong>
<?php esc_html_e( 'Also ensure "Search" is enabled in the sidebar settings when using AI features that need web research.', 'wp-agentic-writer' ); ?>
</p>
</div>
</div>
</div>
<!-- Help -->
<div class="col-12">
<div class="card border-0 border-warning">
<div class="card-header border-bottom-0 pt-3">
<h5 class="card-title mb-0 d-flex align-items-center gap-2">
<i class="bi bi-question-circle text-warning"></i>
<?php esc_html_e( 'Troubleshooting', 'wp-agentic-writer' ); ?>
</h5>
</div>
<div class="card-body">
<ul class="mb-0">
<li>
<strong><?php esc_html_e( 'Connection failed?', 'wp-agentic-writer' ); ?></strong>
<?php esc_html_e( 'Ensure proxy is running:', 'wp-agentic-writer' ); ?>
<code>./start-proxy.sh</code>
</li>
<li>
<strong><?php esc_html_e( 'Wrong IP?', 'wp-agentic-writer' ); ?></strong>
<?php esc_html_e( 'Run', 'wp-agentic-writer' ); ?>
<code>./get-local-ip.sh</code>
<?php esc_html_e( 'to find correct address', 'wp-agentic-writer' ); ?>
</li>
<li>
<strong><?php esc_html_e( 'Firewall blocking?', 'wp-agentic-writer' ); ?></strong>
<?php esc_html_e( 'Allow Node.js on port 8080 in your system firewall', 'wp-agentic-writer' ); ?>
</li>
<li>
<strong><?php esc_html_e( 'Claude not found?', 'wp-agentic-writer' ); ?></strong>
<?php esc_html_e( 'Check Claude CLI:', 'wp-agentic-writer' ); ?>
<code>which claude</code>
<?php esc_html_e( 'or', 'wp-agentic-writer' ); ?>
<code>claude --version</code>
</li>
</ul>
<p class="mt-3 mb-0">
<strong><?php esc_html_e( 'Need help?', 'wp-agentic-writer' ); ?></strong>
<?php esc_html_e( 'Check the README.md and TROUBLESHOOTING.md files in the downloaded package.', 'wp-agentic-writer' ); ?>
</p>
</div>
</div>
</div>
</div>
<script>
function copyToClipboard(text) {
if (navigator.clipboard && navigator.clipboard.writeText) {
navigator.clipboard.writeText(text).then(function() {
alert('Command copied to clipboard!');
}).catch(function(err) {
console.error('Copy failed:', err);
});
} else {
// Fallback for older browsers
var textarea = document.createElement('textarea');
textarea.value = text;
textarea.style.position = 'fixed';
textarea.style.opacity = '0';
document.body.appendChild(textarea);
textarea.select();
try {
document.execCommand('copy');
alert('Command copied to clipboard!');
} catch (err) {
console.error('Copy failed:', err);
}
document.body.removeChild(textarea);
}
}
jQuery(document).ready(function($) {
$('#test-local-backend').on('click', function() {
const btn = $(this);
const status = $('#connection-status');
const url = $('#local_backend_url').val();
if (!url) {
status.html('<span class="text-warning">⚠️ Enter Base URL first</span>');
return;
}
btn.prop('disabled', true).html('<i class="spinner-border spinner-border-sm me-2"></i>Testing...');
status.html('<span class="text-white" style="color:#17a2b8 !important;">⏳ Connecting...</span>');
$.ajax({
url: ajaxurl,
method: 'POST',
data: {
action: 'wpaw_test_local_backend',
url: url,
nonce: '<?php echo esc_js( wp_create_nonce( 'wpaw_test_local_backend' ) ); ?>'
},
success: function(response) {
if (response.success) {
status.html('<span class="text-success">✅ ' + response.data.message + '</span>');
} else {
status.html('<span class="text-danger">❌ ' + (response.data.message || 'Failed') + '</span>');
}
},
error: function(xhr) {
status.html('<span class="text-danger">❌ Connection failed. Check URL and proxy status.</span>');
},
complete: function() {
btn.prop('disabled', false).html('<i class="bi bi-plug me-2"></i><?php esc_html_e( 'Test Connection', 'wp-agentic-writer' ); ?>');
}
});
});
});
</script>

View File

@@ -1,195 +0,0 @@
<?php
/**
* Settings Tab: MEMANTO Context Keeper
*
* @package WP_Agentic_Writer
* @since 0.3.0
* @var array $view_data Prepared view data (extracted in layout.php)
*/
if ( ! defined( 'ABSPATH' ) ) {
exit;
}
// Variables from $view_data (extracted in layout.php).
$memanto_enabled = $memanto_enabled ?? false;
$memanto_url = $memanto_url ?? '';
$memanto_moorcheh_key = $memanto_moorcheh_key ?? '';
?>
<div class="row g-4">
<!-- Enable MEMANTO -->
<div class="col-12">
<div class="wpaw-card">
<div class="wpaw-card-body">
<div class="form-check form-switch mb-0">
<input
class="form-check-input"
type="checkbox"
role="switch"
id="memanto_enabled"
name="wp_agentic_writer_settings[memanto_enabled]"
value="1"
<?php checked( $memanto_enabled ); ?>
>
<label class="form-check-label text-white fw-medium" for="memanto_enabled">
<?php esc_html_e( 'Enable MEMANTO Integration', 'wp-agentic-writer' ); ?>
</label>
</div>
<p class="text-secondary small mt-2 mb-0">
When enabled, the AI writing assistant will store and recall memories across sessions using MEMANTO.
The plugin works perfectly without MEMANTO — this is an optional enhancement.
</p>
</div>
</div>
</div>
<!-- MEMANTO Instance URL -->
<div class="col-md-6">
<div class="wpaw-card h-100">
<div class="wpaw-card-body">
<label for="memanto_url" class="form-label text-white fw-medium">
<i class="bi bi-link-45deg me-1"></i>
<?php esc_html_e( 'MEMANTO Instance URL', 'wp-agentic-writer' ); ?>
</label>
<input
type="url"
class="form-control"
id="memanto_url"
name="wp_agentic_writer_settings[memanto_url]"
value="<?php echo esc_attr( $memanto_url ); ?>"
placeholder="https://your-instance.context.wpagentic.dev"
autocomplete="off"
>
<div class="form-text text-secondary">
The URL of your MEMANTO instance. Provided when you subscribe to MEMANTO Context Keeper.
</div>
</div>
</div>
</div>
<!-- Moorcheh API Key -->
<div class="col-md-6">
<div class="wpaw-card h-100">
<div class="wpaw-card-body">
<label for="memanto_moorcheh_key" class="form-label text-white fw-medium">
<i class="bi bi-key me-1"></i>
<?php esc_html_e( 'Moorcheh API Key', 'wp-agentic-writer' ); ?>
</label>
<input
type="password"
class="form-control"
id="memanto_moorcheh_key"
name="wp_agentic_writer_settings[memanto_moorcheh_key]"
value="<?php echo esc_attr( $memanto_moorcheh_key ); ?>"
placeholder="Enter your Moorcheh API key"
autocomplete="new-password"
>
<div class="form-text text-secondary">
Get a free API key at <a href="https://moorcheh.ai" target="_blank" class="text-info">moorcheh.ai</a> (10K vectors/month included).
Billed to your own Moorcheh account.
</div>
</div>
</div>
</div>
<!-- Connection Status & Test -->
<div class="col-12">
<div class="wpaw-card">
<div class="wpaw-card-body">
<div class="d-flex align-items-center justify-content-between flex-wrap gap-3">
<div class="d-flex align-items-center gap-3">
<span id="memanto-status-indicator" class="badge rounded-pill bg-secondary">
<?php if ( ! empty( $memanto_url ) && ! empty( $memanto_moorcheh_key ) ) : ?>
<span class="spinner-border spinner-border-sm me-1" role="status"></span> Checking...
<?php else : ?>
Not configured
<?php endif; ?>
</span>
<span id="memanto-status-detail" class="text-secondary small"></span>
</div>
<button
type="button"
class="btn btn-sm btn-outline-info"
id="wpaw-test-memanto"
<?php echo ( empty( $memanto_url ) || empty( $memanto_moorcheh_key ) ) ? 'disabled' : ''; ?>
>
<i class="bi bi-wifi me-1"></i>
<?php esc_html_e( 'Test Connection', 'wp-agentic-writer' ); ?>
</button>
</div>
</div>
</div>
</div>
<!-- Info Box -->
<div class="col-12">
<div class="wpaw-card border-info" style="border-left: 3px solid var(--bs-info);">
<div class="wpaw-card-body">
<div class="d-flex gap-3">
<span class="fs-4">🧠</span>
<div>
<h6 class="text-white mb-2">What MEMANTO does</h6>
<ul class="text-secondary small mb-2 ps-3">
<li>Your AI assistant <strong class="text-white">remembers context</strong> across sessions and browser refreshes</li>
<li>Writing preferences <strong class="text-white">carry over</strong> between posts</li>
<li>Eliminates <strong class="text-white">context loss</strong> when switching between Chat, Planning, and Writing modes</li>
<li>Reduces AI token usage by up to <strong class="text-white">63%</strong> through smart memory recall</li>
</ul>
<p class="text-secondary small mb-0">
Don't have MEMANTO? <a href="https://wpagentic.dev/memanto" target="_blank" class="text-info">Get MEMANTO Context Keeper</a>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
jQuery(document).ready(function($) {
// Test MEMANTO connection.
$('#wpaw-test-memanto').on('click', function() {
var btn = $(this);
var statusEl = $('#memanto-status-indicator');
var detailEl = $('#memanto-status-detail');
btn.prop('disabled', true).html('<span class="spinner-border spinner-border-sm me-1"></span> Testing...');
statusEl.removeClass('bg-success bg-danger bg-secondary bg-warning').addClass('bg-warning').html('Testing...');
detailEl.text('');
$.post(wpawSettingsV2.ajaxUrl, {
action: 'wpaw_test_memanto',
nonce: wpawSettingsV2.nonce,
url: $('#memanto_url').val(),
key: $('#memanto_moorcheh_key').val()
}, function(response) {
btn.prop('disabled', false).html('<i class="bi bi-wifi me-1"></i> Test Connection');
if (response.success && response.data.healthy) {
statusEl.removeClass('bg-warning bg-danger bg-secondary').addClass('bg-success').html('🟢 Connected');
var detail = response.data.details || {};
var info = detail.service ? detail.service + ' v' + (detail.version || '?') : 'Healthy';
if (detail.moorcheh_connected) {
info += ' · Moorcheh connected';
}
detailEl.text(info);
} else {
statusEl.removeClass('bg-warning bg-success bg-secondary').addClass('bg-danger').html('🔴 Error');
detailEl.text(response.data?.message || 'Connection failed');
}
}).fail(function() {
btn.prop('disabled', false).html('<i class="bi bi-wifi me-1"></i> Test Connection');
statusEl.removeClass('bg-warning bg-success bg-secondary').addClass('bg-danger').html('🔴 Error');
detailEl.text('Request failed');
});
});
// Auto-test on load if both fields are filled.
if ($('#memanto_url').val() && $('#memanto_moorcheh_key').val()) {
$('#wpaw-test-memanto').trigger('click');
}
});
</script>

View File

@@ -1,346 +0,0 @@
<?php
/**
* Settings Tab: AI Models
*
* @package WP_Agentic_Writer
* @var string $chat_model
* @var string $clarity_model
* @var string $planning_model
* @var string $writing_model
* @var string $refinement_model
* @var string $image_model
* @var array $custom_models
*/
if ( ! defined( 'ABSPATH' ) ) {
exit;
}
if ( ! function_exists( 'wpaw_get_provider_badge' ) ) {
function wpaw_get_provider_badge( $task, $task_providers ) {
$provider = $task_providers[ $task ] ?? ( 'image' === $task ? 'openrouter' : 'openrouter' );
if ( 'local_backend' === $provider ) {
return '<span class="badge border border-secondary text-secondary ms-2 align-middle" style="font-size: 0.65rem;"><i class="bi bi-hdd-network me-1"></i>Local Backend</span>';
} elseif ( 'codex' === $provider ) {
return '<span class="badge border border-secondary text-secondary ms-2 align-middle" style="font-size: 0.65rem;"><i class="bi bi-code-slash me-1"></i>Codex</span>';
} else {
return '<span class="badge border border-secondary text-secondary ms-2 align-middle" style="font-size: 0.65rem;"><i class="bi bi-cloud me-1"></i>OpenRouter</span>';
}
}
}
?>
<div class="row g-4">
<!-- Quick Presets -->
<div class="col-12">
<div class="card border-0 ">
<div class="card-header border-bottom-0 pt-3">
<div class="d-flex align-items-center">
<div>
<h5 class="card-title mb-1 d-flex align-items-center gap-2"><i class="bi bi-lightning-fill text-warning"></i><?php esc_html_e( 'Quick Presets', 'wp-agentic-writer' ); ?></h5>
<p class="text-muted small mb-0"><?php esc_html_e( 'One-click configurations for different budgets', 'wp-agentic-writer' ); ?></p>
</div>
</div>
</div>
<div class="card-body">
<div class="row g-3">
<!-- Budget Preset -->
<div class="col-md-4">
<div class="card border-2 border-secondary preset-card" data-preset="budget" role="button" tabindex="0" style="border:1px solid var(--wpaw-border) !important;">
<div class="card-body">
<div class="d-flex justify-content-between align-items-start mb-2">
<h6 class="card-title mb-0"><?php esc_html_e( 'Budget', 'wp-agentic-writer' ); ?></h6>
<span class="badge text-success" style="color: rgba(var(--bs-success-rgb),var(--bs-text-opacity))!important;">💰 ~$0.06/article</span>
</div>
<div class="small text-muted">
<div><strong>Chat/Clarity/Planning/Refinement:</strong> Gemini 2.5 Flash</div>
<div><strong>Writing:</strong> Mistral Small Creative</div>
<div><strong>Image:</strong> FLUX.2 klein</div>
</div>
</div>
</div>
</div>
<!-- Balanced Preset -->
<div class="col-md-4">
<div class="card border-2 border-primary preset-card" data-preset="balanced" role="button" tabindex="0" style="border:1px solid var(--wpaw-border) !important;">
<div class="card-body">
<div class="d-flex justify-content-between align-items-start mb-2">
<h6 class="card-title mb-0"><?php esc_html_e( 'Balanced', 'wp-agentic-writer' ); ?></h6>
<span class="badge bg-primary">⭐ ~$0.14/article</span>
</div>
<div class="small text-muted">
<div><strong>Chat/Clarity/Planning:</strong> Gemini 2.5 Flash</div>
<div><strong>Writing/Refinement:</strong> Claude 3.5 Sonnet</div>
<div><strong>Image:</strong> Riverflow V2 Max</div>
</div>
</div>
</div>
</div>
<!-- Premium Preset -->
<div class="col-md-4">
<div class="card border-2 border-secondary preset-card" data-preset="premium" role="button" tabindex="0" style="border:1px solid var(--wpaw-border) !important;">
<div class="card-body">
<div class="d-flex justify-content-between align-items-start mb-2">
<h6 class="card-title mb-0"><?php esc_html_e( 'Premium', 'wp-agentic-writer' ); ?></h6>
<span class="badge text-warning" style="color:rgba(var(--bs-warning-rgb),var(--bs-text-opacity))!important;" >✨ ~$0.31/article</span>
</div>
<div class="small text-muted">
<div><strong>Chat/Planning:</strong> Gemini 3 Flash Preview</div>
<div><strong>Clarity:</strong> Claude Sonnet 4</div>
<div><strong>Writing/Refinement:</strong> GPT-4.1</div>
<div><strong>Image:</strong> FLUX.2 max</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Individual Model Selectors -->
<div class="col-12">
<div class="card border-0 ">
<div class="card-header border-bottom-0 pt-3">
<div class="d-flex align-items-center justify-content-between">
<div class="d-flex align-items-center">
<div>
<h5 class="card-title mb-1 d-flex align-items-center gap-2"><i class="bi bi-robot text-warning"></i><?php esc_html_e( 'AI Model Configuration', 'wp-agentic-writer' ); ?></h5>
<p class="text-muted small mb-0"><?php esc_html_e( '6 specialized models for optimal results. Use search to find models.', 'wp-agentic-writer' ); ?></p>
</div>
</div>
<button type="button" class="btn btn-outline-primary btn-sm" id="wpaw-refresh-models">
<span class="spinner-border spinner-border-sm d-none me-1" id="wpaw-models-spinner"></span>
<span class="dashicons dashicons-update me-1"></span>
<?php esc_html_e( 'Refresh Models', 'wp-agentic-writer' ); ?>
</button>
</div>
</div>
<div class="card-body">
<div id="wpaw-models-message" class="alert d-none mb-3"></div>
<div class="border rounded p-3 mb-4">
<div class="d-flex align-items-start justify-content-between gap-3">
<div>
<h6 class="mb-1"><?php esc_html_e( 'OpenRouter Provider Routing', 'wp-agentic-writer' ); ?></h6>
<p class="text-muted small mb-0"><?php esc_html_e( 'Optional. Use this to pin OpenRouter requests to a provider such as OpenAI, Anthropic, Google, or Z.ai when you manage BYOK/provider routing in OpenRouter.', 'wp-agentic-writer' ); ?></p>
</div>
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox"
id="openrouter_provider_routing_enabled"
name="wp_agentic_writer_settings[openrouter_provider_routing_enabled]"
value="1"
<?php checked( ! empty( $openrouter_provider_routing_enabled ) ); ?>>
<label class="form-check-label small" for="openrouter_provider_routing_enabled">
<?php esc_html_e( 'Enable', 'wp-agentic-writer' ); ?>
</label>
</div>
</div>
<div class="row g-3 mt-1">
<div class="col-md-4">
<label for="openrouter_provider_slug" class="form-label small fw-semibold">
<?php esc_html_e( 'Provider slug', 'wp-agentic-writer' ); ?>
</label>
<input type="text"
id="openrouter_provider_slug"
name="wp_agentic_writer_settings[openrouter_provider_slug]"
value="<?php echo esc_attr( $openrouter_provider_slug ?? 'auto' ); ?>"
class="form-control form-control-sm"
placeholder="openai">
<div class="form-text"><?php esc_html_e( 'Examples: openai, anthropic, google, z-ai. Use OpenRouter provider slugs.', 'wp-agentic-writer' ); ?></div>
</div>
<div class="col-md-4">
<div class="form-check mt-4">
<input class="form-check-input" type="checkbox"
id="openrouter_provider_only"
name="wp_agentic_writer_settings[openrouter_provider_only]"
value="1"
<?php checked( ! empty( $openrouter_provider_only ) ); ?>>
<label class="form-check-label" for="openrouter_provider_only">
<?php esc_html_e( 'Only use this provider', 'wp-agentic-writer' ); ?>
</label>
</div>
<div class="form-text"><?php esc_html_e( 'Prevents Azure or other providers when the slug is openai.', 'wp-agentic-writer' ); ?></div>
</div>
<div class="col-md-4">
<div class="form-check mt-4">
<input class="form-check-input" type="checkbox"
id="openrouter_allow_provider_fallbacks"
name="wp_agentic_writer_settings[openrouter_allow_provider_fallbacks]"
value="1"
<?php checked( ! empty( $openrouter_allow_provider_fallbacks ) ); ?>>
<label class="form-check-label" for="openrouter_allow_provider_fallbacks">
<?php esc_html_e( 'Allow fallback providers', 'wp-agentic-writer' ); ?>
</label>
</div>
<div class="form-text"><?php esc_html_e( 'Leave off for BYOK-only behavior. Also enable Always use for this provider in OpenRouter.', 'wp-agentic-writer' ); ?></div>
</div>
</div>
</div>
<div class="row g-4">
<!-- Chat Model -->
<div class="col-md-6">
<label for="chat_model" class="form-label fw-semibold">
<?php esc_html_e( 'Chat Model', 'wp-agentic-writer' ); ?>
<span class="badge bg-info-subtle text-info ms-2">Discussion</span>
<?php echo wpaw_get_provider_badge( 'chat', $task_providers ?? array() ); ?>
</label>
<select id="chat_model" name="wp_agentic_writer_settings[chat_model]" class="form-select wpaw-select2-model" data-model-type="chat">
<option value="<?php echo esc_attr( $chat_model ); ?>"><?php echo esc_html( $chat_model ); ?></option>
</select>
<div class="form-text"><?php esc_html_e( 'Discussion, research, recommendations', 'wp-agentic-writer' ); ?></div>
</div>
<!-- Clarity Model -->
<div class="col-md-6">
<label for="clarity_model" class="form-label fw-semibold">
<?php esc_html_e( 'Clarity Model', 'wp-agentic-writer' ); ?>
<span class="badge bg-info-subtle text-info ms-2">Analysis</span>
<?php echo wpaw_get_provider_badge( 'clarity', $task_providers ?? array() ); ?>
</label>
<select id="clarity_model" name="wp_agentic_writer_settings[clarity_model]" class="form-select wpaw-select2-model" data-model-type="clarity">
<option value="<?php echo esc_attr( $clarity_model ); ?>"><?php echo esc_html( $clarity_model ); ?></option>
</select>
<div class="form-text"><?php esc_html_e( 'Prompt analysis, quiz generation', 'wp-agentic-writer' ); ?></div>
</div>
<!-- Planning Model -->
<div class="col-md-6">
<label for="planning_model" class="form-label fw-semibold">
<?php esc_html_e( 'Planning Model', 'wp-agentic-writer' ); ?>
<span class="badge bg-info-subtle text-info ms-2">Outline</span>
<?php echo wpaw_get_provider_badge( 'planning', $task_providers ?? array() ); ?>
</label>
<select id="planning_model" name="wp_agentic_writer_settings[planning_model]" class="form-select wpaw-select2-model" data-model-type="planning">
<option value="<?php echo esc_attr( $planning_model ); ?>"><?php echo esc_html( $planning_model ); ?></option>
</select>
<div class="form-text"><?php esc_html_e( 'Article outline generation', 'wp-agentic-writer' ); ?></div>
</div>
<!-- Writing Model -->
<div class="col-md-6">
<label for="writing_model" class="form-label fw-semibold">
<?php esc_html_e( 'Writing Model', 'wp-agentic-writer' ); ?>
<span class="badge bg-primary ms-2">Main Writer</span>
<?php echo wpaw_get_provider_badge( 'writing', $task_providers ?? array() ); ?>
</label>
<select id="writing_model" name="wp_agentic_writer_settings[writing_model]" class="form-select wpaw-select2-model" data-model-type="execution">
<option value="<?php echo esc_attr( $writing_model ); ?>"><?php echo esc_html( $writing_model ); ?></option>
</select>
<div class="form-text"><?php esc_html_e( 'Article draft generation (2-5k words)', 'wp-agentic-writer' ); ?></div>
</div>
<!-- Refinement Model -->
<div class="col-md-6">
<label for="refinement_model" class="form-label fw-semibold">
<?php esc_html_e( 'Refinement Model', 'wp-agentic-writer' ); ?>
<span class="badge bg-info text-info ms-2">Editing</span>
<?php echo wpaw_get_provider_badge( 'refinement', $task_providers ?? array() ); ?>
</label>
<select id="refinement_model" name="wp_agentic_writer_settings[refinement_model]" class="form-select wpaw-select2-model" data-model-type="execution">
<option value="<?php echo esc_attr( $refinement_model ); ?>"><?php echo esc_html( $refinement_model ); ?></option>
</select>
<div class="form-text"><?php esc_html_e( 'Paragraph edits, rewrites, polish', 'wp-agentic-writer' ); ?></div>
</div>
<!-- Image Model -->
<div class="col-md-6">
<label for="image_model" class="form-label fw-semibold">
<?php esc_html_e( 'Image Model', 'wp-agentic-writer' ); ?>
<span class="badge text-bg-warning ms-2">Visual</span>
<?php echo wpaw_get_provider_badge( 'image', $task_providers ?? array() ); ?>
</label>
<select id="image_model" name="wp_agentic_writer_settings[image_model]" class="form-select wpaw-select2-model" data-model-type="image">
<option value="<?php echo esc_attr( $image_model ); ?>"><?php echo esc_html( $image_model ); ?></option>
</select>
<div class="form-text"><?php esc_html_e( 'Image generation', 'wp-agentic-writer' ); ?></div>
</div>
</div>
<!-- Custom Models Section -->
<div class="mt-4 pt-4 border-top">
<div class="d-flex align-items-center justify-content-between mb-3">
<div>
<h6 class="mb-1 d-flex align-items-center gap-2">
<i class="bi bi-plus-circle text-success"></i>
<?php esc_html_e( 'Custom Models', 'wp-agentic-writer' ); ?>
</h6>
<p class="text-muted small mb-0"><?php esc_html_e( 'Add models not listed in API (e.g., black-forest-labs/flux.2-klein-4b). They work if you know the exact ID.', 'wp-agentic-writer' ); ?></p>
</div>
<button type="button" class="btn btn-outline-success btn-sm" id="wpaw-add-custom-model">
<i class="bi bi-plus"></i> <?php esc_html_e( 'Add Model', 'wp-agentic-writer' ); ?>
</button>
</div>
<div id="wpaw-custom-models-list">
<?php
if ( ! empty( $custom_models ) ) :
foreach ( $custom_models as $custom_model ) :
?>
<div class="custom-model-row d-flex gap-2 mb-2 align-items-center" data-saved="true">
<input type="text"
data-field="id"
value="<?php echo esc_attr( $custom_model['id'] ?? '' ); ?>"
class="form-control form-control-sm wpaw-custom-model-id"
placeholder="model-provider/model-name"
style="flex: 2;">
<input type="text"
data-field="name"
value="<?php echo esc_attr( $custom_model['name'] ?? '' ); ?>"
class="form-control form-control-sm wpaw-custom-model-name"
placeholder="Display Name (optional)"
style="flex: 2;">
<select data-field="type" class="form-select form-select-sm wpaw-custom-model-type" style="flex: 1;">
<option value="text" <?php selected( ( $custom_model['type'] ?? 'text' ), 'text' ); ?>><?php esc_html_e( 'Text', 'wp-agentic-writer' ); ?></option>
<option value="image" <?php selected( ( $custom_model['type'] ?? 'text' ), 'image' ); ?>><?php esc_html_e( 'Image', 'wp-agentic-writer' ); ?></option>
</select>
<button type="button" class="btn btn-outline-danger btn-sm wpaw-remove-custom-model">
<i class="bi bi-trash"></i>
</button>
</div>
<?php
endforeach;
endif;
?>
</div>
<template id="wpaw-custom-model-template">
<div class="custom-model-row d-flex gap-2 mb-2 align-items-center">
<input type="text"
data-field="id"
class="form-control form-control-sm wpaw-custom-model-id"
placeholder="model-provider/model-name"
style="flex: 2;">
<input type="text"
data-field="name"
class="form-control form-control-sm wpaw-custom-model-name"
placeholder="Display Name (optional)"
style="flex: 2;">
<select data-field="type" class="form-select form-select-sm wpaw-custom-model-type" style="flex: 1;">
<option value="text"><?php esc_html_e( 'Text', 'wp-agentic-writer' ); ?></option>
<option value="image"><?php esc_html_e( 'Image', 'wp-agentic-writer' ); ?></option>
</select>
<button type="button" class="btn btn-outline-danger btn-sm wpaw-remove-custom-model">
<i class="bi bi-trash"></i>
</button>
</div>
</template>
</div>
<!-- Cost Estimate Display -->
<div class="mt-4 p-4 bg-dark rounded-3">
<div class="d-flex align-items-center justify-content-between">
<div>
<h6 class="mb-1"><?php esc_html_e( 'Estimated OpenRouter Cost Per Article', 'wp-agentic-writer' ); ?></h6>
<p class="text-muted small mb-0"><?php esc_html_e( 'Based on ~2K planning tokens, ~4K execution tokens, and 1 image.', 'wp-agentic-writer' ); ?></p>
</div>
<div class="text-end">
<div id="wpaw-cost-estimate" class="fs-3 fw-bold text-primary">~$0.00</div>
<div class="text-muted small"><?php esc_html_e( 'per article', 'wp-agentic-writer' ); ?></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>