fix: UX audit improvements - dark theme, structured errors, heartbeat, health check

Phase 1 - UI Theme Consistency:
- Chat messages now use consistent dark theme (removed jarring white bg)
- Plan cards restyled with rounded borders, fills, colored status badges
- Timeline entries use humanist sans-serif instead of monospace
- Error messages now structured (icon + title + detail + action link)
- Input area unified with dark theme cohesion

Phase 2 - UX Flow:
- Added contextual placeholder text per agent mode in textarea
- Added visual mode indicator badge (Chat/Planning/Writing)
- Simplified welcome screen (single 'Continue' + collapsible history)
- Added slash command/mention discovery hint in empty input
- Added write confirmation when editor has existing content
- Added 30s streaming heartbeat (reassurance when model is slow)

Phase 3 - Error Handling:
- Added DB table health check on sidebar init
- Improved 'no API key' error with settings link
- Shows in-chat warning when provider fallback triggers
- Auto-fallback to registry fallback model on unavailability
- isLoading always resets via try/finally pattern
This commit is contained in:
Dwindi Ramadhana
2026-06-06 00:43:10 +07:00
parent ae70e4aea9
commit f7bf1f5153
5 changed files with 588 additions and 202 deletions

View File

@@ -243,6 +243,9 @@ class WP_Agentic_Writer_Gutenberg_Sidebar {
// Get settings for JS.
$settings = $this->get_settings_for_js();
// Health check: verify DB table and API key exist
$health = $this->run_health_check();
// Localize script with data.
$data = array(
'apiUrl' => rest_url( 'wp-agentic-writer/v1' ),
@@ -252,11 +255,48 @@ class WP_Agentic_Writer_Gutenberg_Sidebar {
'version' => WP_AGENTIC_WRITER_VERSION,
'debug' => defined( 'SCRIPT_DEBUG' ) && SCRIPT_DEBUG,
'pluginUrl' => plugin_dir_url( dirname( __FILE__ ) ),
'health' => $health,
);
wp_localize_script( 'wp-agentic-writer-sidebar', 'wpAgenticWriter', $data );
}
/**
* Run health check for sidebar initialization.
*
* @since 0.2.4
* @return array Health status.
*/
private function run_health_check() {
global $wpdb;
$table_name = $wpdb->prefix . 'wpaw_conversations';
$table_exists = $wpdb->get_var( $wpdb->prepare( 'SHOW TABLES LIKE %s', $table_name ) ) === $table_name;
$settings = get_option( 'wp_agentic_writer_settings', array() );
$has_api_key = ! empty( $settings['openrouter_api_key'] );
$issues = array();
if ( ! $table_exists ) {
$issues[] = array(
'type' => 'db_table_missing',
'message' => 'Conversation table not found. Please deactivate and reactivate the plugin.',
);
}
if ( ! $has_api_key ) {
$issues[] = array(
'type' => 'no_api_key',
'message' => 'API key not configured. Add your OpenRouter key in settings.',
'actionUrl' => admin_url( 'options-general.php?page=wp-agentic-writer-settings' ),
'actionLabel' => 'Open Settings',
);
}
return array(
'ok' => empty( $issues ),
'issues' => $issues,
);
}
/**
* Get settings for JavaScript.
*