+
+
+
+ manager ) {
+ $this->manager = get_request_log_manager() ?? new AI_Request_Log_Manager();
+ }
+
+ return $this->manager;
+ }
+
+ /**
+ * {@inheritDoc}
+ */
+ public function get_entry_points(): array {
+ return array(
+ array(
+ 'label' => esc_html__( 'Dashboard', 'ai' ),
+ 'url' => admin_url( 'options-general.php?page=ai-request-logs' ),
+ 'type' => 'dashboard',
+ ),
+ );
+ }
+}
diff --git a/includes/Logging/AI_Request_Cost_Calculator.php b/includes/Logging/AI_Request_Cost_Calculator.php
new file mode 100644
index 00000000..3584d67d
--- /dev/null
+++ b/includes/Logging/AI_Request_Cost_Calculator.php
@@ -0,0 +1,189 @@
+>
+ */
+ private static array $model_costs = array(
+ 'openai' => array(
+ 'gpt-5.1' => array(
+ 'input' => 0.00125,
+ 'output' => 0.01,
+ ),
+ 'gpt-5-mini' => array(
+ 'input' => 0.00025,
+ 'output' => 0.002,
+ ),
+ 'gpt-5-nano' => array(
+ 'input' => 0.00005,
+ 'output' => 0.0004,
+ ),
+ 'gpt-5-pro' => array(
+ 'input' => 0.015,
+ 'output' => 0.12,
+ ),
+ 'gpt-4' => array(
+ 'input' => 0.03,
+ 'output' => 0.06,
+ ),
+ 'gpt-4-turbo' => array(
+ 'input' => 0.01,
+ 'output' => 0.03,
+ ),
+ 'gpt-4o' => array(
+ 'input' => 0.005,
+ 'output' => 0.015,
+ ),
+ 'gpt-4o-mini' => array(
+ 'input' => 0.00015,
+ 'output' => 0.0006,
+ ),
+ 'gpt-3.5-turbo' => array(
+ 'input' => 0.0005,
+ 'output' => 0.0015,
+ ),
+ ),
+ 'anthropic' => array(
+ 'claude-4.5-opus' => array(
+ 'input' => 0.005,
+ 'output' => 0.025,
+ ),
+ 'claude-4.5-sonnet' => array(
+ 'input' => 0.003,
+ 'output' => 0.015,
+ ),
+ 'claude-4.5-haiku' => array(
+ 'input' => 0.001,
+ 'output' => 0.005,
+ ),
+ 'claude-haiku-4-5' => array(
+ 'input' => 0.001,
+ 'output' => 0.005,
+ ),
+ 'claude-3-opus' => array(
+ 'input' => 0.015,
+ 'output' => 0.075,
+ ),
+ 'claude-3-5-sonnet' => array(
+ 'input' => 0.003,
+ 'output' => 0.015,
+ ),
+ 'claude-3-sonnet' => array(
+ 'input' => 0.003,
+ 'output' => 0.015,
+ ),
+ 'claude-3-haiku' => array(
+ 'input' => 0.00025,
+ 'output' => 0.00125,
+ ),
+ ),
+ 'google' => array(
+ 'gemini-3-pro-preview' => array(
+ 'input' => 0.002,
+ 'output' => 0.012,
+ ),
+ 'gemini-3-pro-preview-high-context' => array(
+ 'input' => 0.004,
+ 'output' => 0.018,
+ ),
+ 'gemini-2.5-pro' => array(
+ 'input' => 0.00125,
+ 'output' => 0.01,
+ ),
+ 'gemini-2.5-pro-high-context' => array(
+ 'input' => 0.0025,
+ 'output' => 0.015,
+ ),
+ 'gemini-2.5-flash' => array(
+ 'input' => 0.0003,
+ 'output' => 0.0025,
+ ),
+ 'gemini-2.5-flash-lite' => array(
+ 'input' => 0.0001,
+ 'output' => 0.0004,
+ ),
+ 'gemini-1.5-pro' => array(
+ 'input' => 0.00125,
+ 'output' => 0.005,
+ ),
+ 'gemini-1.5-flash' => array(
+ 'input' => 0.000075,
+ 'output' => 0.0003,
+ ),
+ ),
+ );
+
+ /**
+ * Estimates the cost of an AI request based on token usage.
+ *
+ * @since x.x.x
+ *
+ * @param string $provider The AI provider identifier.
+ * @param string $model The model identifier.
+ * @param int $tokens_input Number of input tokens.
+ * @param int $tokens_output Number of output tokens.
+ * @return float|null Estimated cost in USD, or null if pricing is unknown.
+ */
+ public function estimate( string $provider, string $model, int $tokens_input, int $tokens_output ): ?float {
+ $costs = $this->get_model_costs();
+
+ $provider_lower = strtolower( $provider );
+ $model_lower = strtolower( $model );
+
+ // Try exact match first.
+ if ( isset( $costs[ $provider_lower ][ $model_lower ] ) ) {
+ $pricing = $costs[ $provider_lower ][ $model_lower ];
+ return ( $tokens_input / 1000 * $pricing['input'] ) +
+ ( $tokens_output / 1000 * $pricing['output'] );
+ }
+
+ // Try prefix match for model variants (e.g., gpt-4-turbo-preview -> gpt-4-turbo).
+ if ( isset( $costs[ $provider_lower ] ) ) {
+ foreach ( $costs[ $provider_lower ] as $model_key => $pricing ) {
+ if ( str_starts_with( $model_lower, $model_key ) ) {
+ return ( $tokens_input / 1000 * $pricing['input'] ) +
+ ( $tokens_output / 1000 * $pricing['output'] );
+ }
+ }
+ }
+
+ return null;
+ }
+
+ /**
+ * Returns the model costs registry, allowing for filtering.
+ *
+ * @since x.x.x
+ *
+ * @return array+ +
+
+
+ schema = $schema;
+ $this->cost_calculator = $cost_calculator;
+ }
+
+ /**
+ * Logs an AI request.
+ *
+ * @since x.x.x
+ *
+ * @param array{
+ * type: string,
+ * operation: string,
+ * provider?: string,
+ * model?: string,
+ * duration_ms?: int,
+ * tokens_input?: int,
+ * tokens_output?: int,
+ * status: string,
+ * error_message?: string,
+ * user_id?: int,
+ * context?: array
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ { log.operation }
+
+
+ { getStatusIcon( log.status ) } { log.status }
+
+
+
+
+
+
+
+ { ( log.provider || log.model ) && (
+ { __( 'General', 'ai' ) }
+| { __( 'Timestamp', 'ai' ) } | +{ formatTimestamp( log.timestamp ) } | +
|---|---|
| { __( 'Duration', 'ai' ) } | ++ { log.duration_ms !== null + ? sprintf( + /* translators: %d: request duration in milliseconds. */ + __( '%d ms', 'ai' ), + log.duration_ms + ) + : '-' } + | +
| { __( 'Type', 'ai' ) } | +{ log.type } | +
| { __( 'Request Kind', 'ai' ) } | +{ formatKindLabel( requestKind ) } | +
| { __( 'User ID', 'ai' ) } | +{ log.user_id } | +
+
+
+ { log.provider && (
+
+
+ ) }
+
+ { ( log.tokens_input !== null ||
+ log.tokens_output !== null ) && (
+ { __( 'Provider & Model', 'ai' ) }
+| { __( 'Provider', 'ai' ) } | +{ log.provider } | +
|---|---|
| { __( 'Model', 'ai' ) } | +{ log.model } | +
+
+
+
+
+ ) }
+
+ { log.error_message && (
+ { __( 'Token Usage', 'ai' ) }
+| { __( 'Input Tokens', 'ai' ) } | ++ { log.tokens_input?.toLocaleString() ?? + '-' } + | +
|---|---|
| { __( 'Output Tokens', 'ai' ) } | ++ { log.tokens_output?.toLocaleString() ?? + '-' } + | +
| { __( 'Total Tokens', 'ai' ) } | ++ { log.tokens_total?.toLocaleString() ?? + '-' } + | +
| { __( 'Tokens per Second', 'ai' ) } | ++ { formatTokensPerSecond( + log.tokens_per_second ?? null + ) } + | +
| { __( 'Estimated Cost', 'ai' ) } | +{ formatCost( log.cost_estimate ) } | +
+
+ ) }
+
+ { inputPreview && (
+ { __( 'Error', 'ai' ) }
+
+ { log.error_message }
+
+
+
+ ) }
+
+ { outputPreview && (
+ { __( 'Input Preview', 'ai' ) }
+
+ { inputPreview }
+
+
+
+ ) }
+
+ { ( imageUrls.length > 0 || base64Images.length > 0 ) && (
+ { __( 'Output Preview', 'ai' ) }
+
+ { outputPreview }
+
+
+
+ ) }
+
+ { log.context && Object.keys( log.context ).length > 0 && (
+ { __( 'Generated Images', 'ai' ) }
+
+ { imageUrls.map( ( url, index ) => (
+
+ 
+
+ { sprintf(
+ /* translators: %d: image index */
+ __( 'Image %d', 'ai' ),
+ index + 1
+ ) }
+
+
+ ) ) }
+ { base64Images.map( ( sample, index ) => (
+
+
+
+ { sprintf(
+ /* translators: %d: image index */
+ __( 'Image %d', 'ai' ),
+ imageUrls.length + index + 1
+ ) }
+
+
+ ) ) }
+
+
+
+ ) }
+
+ { __( 'Context', 'ai' ) }
+
+ { JSON.stringify( log.context, null, 2 ) }
+
+
+
+
+ { log.id }
+
+
+
+
+ ),
+ },
+ {
+ id: 'operation_pattern',
+ label: __( 'Request Type', 'ai' ),
+ type: 'text',
+ getValue: ( { item } ) => getRequestKind( item ),
+ elements: requestKindElements,
+ filterBy:
+ requestKindElements.length > 0
+ ? { operators: [ 'is' ] }
+ : false,
+ enableHiding: false,
+ render: ( { item } ) => (
+
+ { formatSelectLabel( getRequestKind( item ) ) }
+
+ ),
+ },
+ {
+ id: 'type',
+ label: __( 'Type', 'ai' ),
+ type: 'text',
+ getValue: ( { item } ) => item.type,
+ elements: typeElements,
+ filterBy:
+ typeElements.length > 0 ? { operators: [ 'is' ] } : false,
+ enableHiding: false,
+ isVisible: () => false,
+ },
+ {
+ id: 'provider',
+ label: __( 'Provider / Model', 'ai' ),
+ type: 'text',
+ getValue: ( { item } ) => item.provider ?? '',
+ elements: providerElements,
+ filterBy:
+ providerElements.length > 0
+ ? { operators: [ 'is' ] }
+ : false,
+ render: ( { item } ) => (
+ { item.operation }
+ { item.error_message && (
+
+ { item.error_message.substring( 0, 50 ) }
+ { item.error_message.length > 50 ? '…' : '' }
+
+ ) }
+ { __( 'Request Logs', 'ai' ) }
+ { total > 0 && ( + + { sprintf( + /* translators: %d: total number of logged requests. */ + __( '%d total', 'ai' ), + total + ) } + + ) } ++ { hasActiveFilters + ? __( 'No logs match your filters.', 'ai' ) + : __( + 'No AI requests have been logged yet.', + 'ai' + ) } +
+ } + searchLabel={ __( 'Search logs', 'ai' ) } + /> +
+
+ );
+ }
+
+ const IconComponent = getProviderIconComponent(
+ metadata.icon || metadata.id,
+ provider || undefined
+ );
+
+ return (
+
+ { provider && (
+
+ { provider }
+
+ ) }
+
+ { model && (
+ { model }
+ ) }
+ setIsPopoverVisible( true ) }
+ onMouseLeave={ () => setIsPopoverVisible( false ) }
+ >
+
+
+ ) }
+
+ );
+};
+
+export default LogsTable;
diff --git a/src/admin/ai-request-logs/components/SettingsPanel.tsx b/src/admin/ai-request-logs/components/SettingsPanel.tsx
new file mode 100644
index 00000000..0d1b7ad6
--- /dev/null
+++ b/src/admin/ai-request-logs/components/SettingsPanel.tsx
@@ -0,0 +1,129 @@
+/**
+ * WordPress dependencies
+ */
+import {
+ Button,
+ Card,
+ CardBody,
+ CardHeader,
+ RangeControl,
+ ToggleControl,
+} from '@wordpress/components';
+import { __, sprintf } from '@wordpress/i18n';
+/**
+ * External dependencies
+ */
+import React, { useState } from 'react';
+
+interface SettingsPanelProps {
+ enabled: boolean;
+ retentionDays: number;
+ onToggleEnabled: ( enabled: boolean ) => void;
+ onRetentionChange: ( days: number ) => void;
+ onPurgeLogs: () => void;
+ saving: boolean;
+ purging: boolean;
+}
+
+const SettingsPanel: React.FC< SettingsPanelProps > = ( {
+ enabled,
+ retentionDays,
+ onToggleEnabled,
+ onRetentionChange,
+ onPurgeLogs,
+ saving,
+ purging,
+} ) => {
+ const [ showPurgeConfirm, setShowPurgeConfirm ] = useState( false );
+
+ const handlePurge = () => {
+ if ( showPurgeConfirm ) {
+ onPurgeLogs();
+ setShowPurgeConfirm( false );
+ } else {
+ setShowPurgeConfirm( true );
+ }
+ };
+
+ return (
+
+
+
+ { model && (
+ { model }
+ ) }
+ { isPopoverVisible && (
+
+
+
+
+
+ { model && (
+
+ { model }
+
+ ) }
+
+ { metadata.url && (
+
+ { __( 'API Key Settings', 'ai' ) }
+
+ ) }
+
+ { __( 'Provider Credentials', 'ai' ) }
+
+
+ { __( 'Settings', 'ai' ) }
+
+
+ { __( 'Danger Zone', 'ai' ) }
++ { __( + 'Permanently delete all logged requests. This action cannot be undone.', + 'ai' + ) } +
+ { showPurgeConfirm ? ( +
+ { __( 'Are you sure?', 'ai' ) }
+
+
+
+ ) : (
+
+ ) }
+
+
+ );
+};
+
+export default SummaryCards;
diff --git a/src/admin/ai-request-logs/index.tsx b/src/admin/ai-request-logs/index.tsx
new file mode 100644
index 00000000..a652e0a4
--- /dev/null
+++ b/src/admin/ai-request-logs/index.tsx
@@ -0,0 +1,419 @@
+/**
+ * Internal dependencies
+ */
+import './style.scss';
+
+/**
+ * WordPress dependencies
+ */
+import apiFetch from '@wordpress/api-fetch';
+import { Notice } from '@wordpress/components';
+import { dispatch } from '@wordpress/data';
+import type { Filter, View } from '@wordpress/dataviews';
+import { store as noticesStore } from '@wordpress/notices';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * External dependencies
+ */
+import React, { useCallback, useEffect, useState } from 'react';
+import { createRoot } from 'react-dom/client';
+
+/**
+ * Internal dependencies
+ */
+import { usePersistedView } from '../hooks/usePersistedView';
+
+import HeaderPeriodSelector from './components/HeaderPeriodSelector';
+import LogDetailModal from './components/LogDetailModal';
+import LogsTable from './components/LogsTable';
+import SettingsPanel from './components/SettingsPanel';
+import SummaryCards from './components/SummaryCards';
+import type {
+ FilterOptions,
+ LocalizedSettings,
+ LogEntry,
+ LogSummary,
+} from './types';
+
+const settings: LocalizedSettings =
+ window.aiAiRequestLogsSettings ??
+ window.AiRequestLogsSettings ??
+ ( () => {
+ throw new Error( 'AiRequestLogsSettings is not defined.' );
+ } )();
+
+const providerMetadata = settings.providerMetadata ?? {};
+
+apiFetch.use( apiFetch.createNonceMiddleware( settings.rest.nonce ) );
+apiFetch.use( apiFetch.createRootURLMiddleware( settings.rest.root ) );
+
+const showNotice = (
+ status: 'success' | 'error' | 'warning',
+ message: string
+) =>
+ dispatch( noticesStore ).createNotice( status, message, {
+ type: 'snackbar',
+ } );
+
+const getErrorMessage = ( error: unknown ): string => {
+ if ( typeof error === 'string' ) {
+ return error;
+ }
+ if ( error && typeof error === 'object' && 'message' in error ) {
+ return String( ( error as { message: string } ).message );
+ }
+ return __( 'Something went wrong. Please try again.', 'ai' );
+};
+
+const defaultView: View = {
+ type: 'table',
+ perPage: 25,
+ page: 1,
+ search: '',
+ filters: [],
+ fields: [
+ 'timestamp',
+ 'operation',
+ 'provider',
+ 'tokens_total',
+ 'duration_ms',
+ 'status',
+ 'actions',
+ ],
+ sort: {
+ field: 'timestamp',
+ direction: 'desc',
+ },
+ layout: {
+ density: 'comfortable',
+ },
+};
+
+const normalizeFilterValue = ( raw: unknown ): string => {
+ if ( Array.isArray( raw ) ) {
+ return normalizeFilterValue( raw[ 0 ] );
+ }
+ if (
+ raw &&
+ typeof raw === 'object' &&
+ 'value' in ( raw as Record< string, unknown > )
+ ) {
+ return normalizeFilterValue( ( raw as { value: unknown } ).value );
+ }
+ if ( typeof raw === 'string' ) {
+ return raw;
+ }
+ return '';
+};
+
+const normalizeFilterArrayValue = ( raw: unknown ): string[] => {
+ if ( Array.isArray( raw ) ) {
+ return raw.map( ( item ) => {
+ if ( typeof item === 'string' ) {
+ return item;
+ }
+ if ( item && typeof item === 'object' && 'value' in item ) {
+ return String( ( item as { value: unknown } ).value );
+ }
+ return String( item );
+ } );
+ }
+ if ( typeof raw === 'string' && raw ) {
+ return [ raw ];
+ }
+ return [];
+};
+
+const extractFilterValue = (
+ filters: Filter[] | undefined,
+ field: string
+): string => {
+ const match = filters?.find( ( entry ) => entry.field === field );
+ return normalizeFilterValue( match?.value ?? '' );
+};
+
+const extractFilterArrayValue = (
+ filters: Filter[] | undefined,
+ field: string
+): string[] => {
+ const match = filters?.find( ( entry ) => entry.field === field );
+ return normalizeFilterArrayValue( match?.value ?? [] );
+};
+
+const App: React.FC = () => {
+ // Settings state
+ const [ enabled, setEnabled ] = useState( settings.initialState.enabled );
+ const [ retentionDays, setRetentionDays ] = useState(
+ settings.initialState.retentionDays
+ );
+
+ // Summary state
+ const [ summary, setSummary ] = useState< LogSummary >(
+ settings.initialState.summary
+ );
+ const [ summaryPeriod, setSummaryPeriod ] = useState<
+ 'minute' | 'hour' | 'day' | 'week' | 'month' | 'all'
+ >( 'day' );
+ const [ summaryLoading, setSummaryLoading ] = useState( false );
+
+ // Logs state
+ const [ logs, setLogs ] = useState< LogEntry[] >( [] );
+ const [ logsLoading, setLogsLoading ] = useState( true );
+ const [ totalPages, setTotalPages ] = useState( 1 );
+ const [ total, setTotal ] = useState( 0 );
+
+ const { view, setView } = usePersistedView< View >(
+ 'ai-request-logs',
+ defaultView
+ );
+ const [ filterOptions, setFilterOptions ] = useState< FilterOptions >(
+ settings.initialState.filters
+ );
+
+ // UI state
+ const [ selectedLog, setSelectedLog ] = useState< LogEntry | null >( null );
+ const [ error, setError ] = useState< string | null >( null );
+ const [ saving, setSaving ] = useState( false );
+ const [ purging, setPurging ] = useState( false );
+
+ // Fetch summary
+ const fetchSummary = useCallback( async ( period: string ) => {
+ setSummaryLoading( true );
+ try {
+ const response = await apiFetch< LogSummary >( {
+ path: `${ settings.rest.routes.summary }?period=${ period }`,
+ } );
+ setSummary( response );
+ } catch ( apiError ) {
+ showNotice( 'error', __( 'Unable to load summary data.', 'ai' ) );
+ } finally {
+ setSummaryLoading( false );
+ }
+ }, [] );
+
+ // Fetch logs
+ const fetchLogs = useCallback( async () => {
+ setLogsLoading( true );
+ try {
+ const params = new URLSearchParams( {
+ page: String( view.page ?? 1 ),
+ per_page: '25',
+ } );
+ const typeFilter = extractFilterValue( view.filters, 'type' );
+ const statusFilter = extractFilterValue( view.filters, 'status' );
+ const providerFilter = extractFilterValue(
+ view.filters,
+ 'provider'
+ );
+ const operationFilter = extractFilterArrayValue(
+ view.filters,
+ 'operation'
+ );
+ const operationPatternFilter = extractFilterValue(
+ view.filters,
+ 'operation_pattern'
+ );
+ const tokensFilterValue = extractFilterValue(
+ view.filters,
+ 'tokens_total'
+ );
+ const searchTerm = view.search ?? '';
+
+ if ( typeFilter ) {
+ params.append( 'type', typeFilter );
+ }
+ if ( statusFilter ) {
+ params.append( 'status', statusFilter );
+ }
+ if ( providerFilter ) {
+ params.append( 'provider', providerFilter );
+ }
+ if ( operationFilter.length > 0 ) {
+ params.append( 'operation', operationFilter.join( ',' ) );
+ }
+ if ( operationPatternFilter ) {
+ params.append( 'operation_pattern', operationPatternFilter );
+ }
+ if ( tokensFilterValue ) {
+ params.append( 'tokens_filter', tokensFilterValue );
+ }
+ if ( searchTerm ) {
+ params.append( 'search', searchTerm );
+ }
+
+ const response = ( await apiFetch< LogEntry[] >( {
+ path: `${ settings.rest.routes.logs }?${ params.toString() }`,
+ parse: false,
+ } ) ) as Response;
+
+ const data = await response.json();
+ setLogs( data );
+ setTotal(
+ parseInt( response.headers.get( 'X-WP-Total' ) || '0', 10 )
+ );
+ setTotalPages(
+ parseInt( response.headers.get( 'X-WP-TotalPages' ) || '1', 10 )
+ );
+ setError( null );
+ } catch ( apiError ) {
+ setError( getErrorMessage( apiError ) );
+ } finally {
+ setLogsLoading( false );
+ }
+ }, [ view.filters, view.page, view.search ] );
+
+ // Fetch filter options
+ const fetchFilters = useCallback( async () => {
+ try {
+ const response = await apiFetch< FilterOptions >( {
+ path: settings.rest.routes.filters,
+ } );
+ // Ensure operations array exists (fallback for older backends)
+ setFilterOptions( {
+ ...response,
+ operations: response.operations ?? [],
+ } );
+ } catch ( apiError ) {
+ showNotice(
+ 'error',
+ __( 'Unable to load filter metadata.', 'ai' )
+ );
+ }
+ }, [] );
+
+ // Initial load
+ useEffect( () => {
+ fetchLogs();
+ fetchFilters();
+ }, [ fetchLogs, fetchFilters ] );
+
+ // Handle period change
+ const handlePeriodChange = (
+ period: 'minute' | 'hour' | 'day' | 'week' | 'month' | 'all'
+ ) => {
+ setSummaryPeriod( period );
+ fetchSummary( period );
+ };
+
+ // Handle settings update
+ const handleSettingsUpdate = async (
+ newEnabled?: boolean,
+ newRetention?: number
+ ) => {
+ setSaving( true );
+ try {
+ const data: Record< string, unknown > = {};
+ if ( newEnabled !== undefined ) {
+ data.enabled = newEnabled;
+ }
+ if ( newRetention !== undefined ) {
+ data.retention_days = newRetention;
+ }
+
+ await apiFetch( {
+ path: settings.rest.routes.logs,
+ method: 'POST',
+ data,
+ } );
+
+ if ( newEnabled !== undefined ) {
+ setEnabled( newEnabled );
+ }
+ if ( newRetention !== undefined ) {
+ setRetentionDays( newRetention );
+ }
+
+ showNotice( 'success', __( 'Settings saved.', 'ai' ) );
+ } catch ( apiError ) {
+ showNotice( 'error', getErrorMessage( apiError ) );
+ } finally {
+ setSaving( false );
+ }
+ };
+
+ // Handle purge
+ const handlePurge = async () => {
+ setPurging( true );
+ try {
+ await apiFetch( {
+ path: settings.rest.routes.logs,
+ method: 'DELETE',
+ } );
+
+ // Clear logs immediately for instant UI feedback
+ setLogs( [] );
+ setTotal( 0 );
+ setTotalPages( 1 );
+ setView( ( prev ) => ( { ...prev, page: 1 } ) );
+
+ showNotice( 'success', __( 'All logs have been purged.', 'ai' ) );
+ fetchSummary( summaryPeriod );
+ fetchFilters();
+ } catch ( apiError ) {
+ showNotice( 'error', getErrorMessage( apiError ) );
+ } finally {
+ setPurging( false );
+ }
+ };
+
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ { formatNumber( summary.total_requests ) }
+
+
+ { __( 'Requests', 'ai' ) }
+
+
+ { formatNumber( summary.total_tokens ) }
+
+
+ { __( 'Tokens', 'ai' ) }
+
+
+ { formatDuration( summary.avg_duration_ms ) }
+
+
+ { __( 'Avg Time', 'ai' ) }
+
+
+ { formatCost( summary.total_cost ) }
+
+
+ { __( 'Est. Cost', 'ai' ) }
+
+
+ { summary.success_rate.toFixed( 1 ) }%
+
+
+ { __( 'Success Rate', 'ai' ) }
+
+
+ setError( null ) }>
+ { error }
+
+ ) }
+
+ setSelectedLog( null ) }
+ />
+ ) }
+
+ );
+};
+
+const mountNode = document.getElementById( 'ai-request-logs-root' );
+
+if ( mountNode ) {
+ const root = createRoot( mountNode );
+ root.render(
+
+ handleSettingsUpdate( value, undefined )
+ }
+ onRetentionChange={ ( value ) =>
+ handleSettingsUpdate( undefined, value )
+ }
+ onPurgeLogs={ handlePurge }
+ saving={ saving }
+ purging={ purging }
+ />
+
+
+ { selectedLog && (
+
+
+ );
+};
+
+export default ProviderTooltipContent;
diff --git a/src/admin/components/icons/AiIcon.tsx b/src/admin/components/icons/AiIcon.tsx
new file mode 100644
index 00000000..f1daf850
--- /dev/null
+++ b/src/admin/components/icons/AiIcon.tsx
@@ -0,0 +1,26 @@
+/**
+ * External dependencies
+ */
+import type { SVGProps } from 'react';
+
+/**
+ * AI Icon - Cauldron with sparkles design used for AI features.
+ */
+const AiIcon = ( props: SVGProps< SVGSVGElement > ) => (
+
+);
+
+export default AiIcon;
diff --git a/src/admin/components/icons/AnthropicIcon.tsx b/src/admin/components/icons/AnthropicIcon.tsx
new file mode 100644
index 00000000..d64f80bd
--- /dev/null
+++ b/src/admin/components/icons/AnthropicIcon.tsx
@@ -0,0 +1,22 @@
+/**
+ * External dependencies
+ */
+import type { SVGProps } from 'react';
+
+/**
+ * Anthropic (Claude) Icon
+ */
+const AnthropicIcon = ( props: SVGProps< SVGSVGElement > ) => (
+
+);
+
+export default AnthropicIcon;
diff --git a/src/admin/components/icons/CloudflareIcon.tsx b/src/admin/components/icons/CloudflareIcon.tsx
new file mode 100644
index 00000000..804c6573
--- /dev/null
+++ b/src/admin/components/icons/CloudflareIcon.tsx
@@ -0,0 +1,29 @@
+/**
+ * External dependencies
+ */
+import type { SVGProps } from 'react';
+
+/**
+ * Cloudflare Icon
+ */
+const CloudflareIcon = ( props: SVGProps< SVGSVGElement > ) => (
+
+);
+
+export default CloudflareIcon;
diff --git a/src/admin/components/icons/DeepSeekIcon.tsx b/src/admin/components/icons/DeepSeekIcon.tsx
new file mode 100644
index 00000000..effcfe19
--- /dev/null
+++ b/src/admin/components/icons/DeepSeekIcon.tsx
@@ -0,0 +1,22 @@
+/**
+ * External dependencies
+ */
+import type { SVGProps } from 'react';
+
+/**
+ * DeepSeek Icon
+ */
+const DeepSeekIcon = ( props: SVGProps< SVGSVGElement > ) => (
+
+);
+
+export default DeepSeekIcon;
diff --git a/src/admin/components/icons/FalIcon.tsx b/src/admin/components/icons/FalIcon.tsx
new file mode 100644
index 00000000..e5f43adb
--- /dev/null
+++ b/src/admin/components/icons/FalIcon.tsx
@@ -0,0 +1,26 @@
+/**
+ * External dependencies
+ */
+import type { SVGProps } from 'react';
+
+/**
+ * Fal.ai Icon
+ */
+const FalIcon = ( props: SVGProps< SVGSVGElement > ) => (
+
+);
+
+export default FalIcon;
diff --git a/src/admin/components/icons/GoogleIcon.tsx b/src/admin/components/icons/GoogleIcon.tsx
new file mode 100644
index 00000000..5ec6b0ee
--- /dev/null
+++ b/src/admin/components/icons/GoogleIcon.tsx
@@ -0,0 +1,22 @@
+/**
+ * External dependencies
+ */
+import type { SVGProps } from 'react';
+
+/**
+ * Google Icon
+ */
+const GoogleIcon = ( props: SVGProps< SVGSVGElement > ) => (
+
+);
+
+export default GoogleIcon;
diff --git a/src/admin/components/icons/GrokIcon.tsx b/src/admin/components/icons/GrokIcon.tsx
new file mode 100644
index 00000000..e6fcb836
--- /dev/null
+++ b/src/admin/components/icons/GrokIcon.tsx
@@ -0,0 +1,22 @@
+/**
+ * External dependencies
+ */
+import type { SVGProps } from 'react';
+
+/**
+ * Grok Icon
+ */
+const GrokIcon = ( props: SVGProps< SVGSVGElement > ) => (
+
+);
+
+export default GrokIcon;
diff --git a/src/admin/components/icons/GroqIcon.tsx b/src/admin/components/icons/GroqIcon.tsx
new file mode 100644
index 00000000..4f87cfd2
--- /dev/null
+++ b/src/admin/components/icons/GroqIcon.tsx
@@ -0,0 +1,22 @@
+/**
+ * External dependencies
+ */
+import type { SVGProps } from 'react';
+
+/**
+ * Groq Icon
+ */
+const GroqIcon = ( props: SVGProps< SVGSVGElement > ) => (
+
+);
+
+export default GroqIcon;
diff --git a/src/admin/components/icons/HuggingFaceIcon.tsx b/src/admin/components/icons/HuggingFaceIcon.tsx
new file mode 100644
index 00000000..ba89ab6d
--- /dev/null
+++ b/src/admin/components/icons/HuggingFaceIcon.tsx
@@ -0,0 +1,45 @@
+/**
+ * External dependencies
+ */
+import type { SVGProps } from 'react';
+
+/**
+ * Hugging Face Icon
+ */
+const HuggingFaceIcon = ( props: SVGProps< SVGSVGElement > ) => (
+
+);
+
+export default HuggingFaceIcon;
diff --git a/src/admin/components/icons/McpIcon.tsx b/src/admin/components/icons/McpIcon.tsx
new file mode 100644
index 00000000..abe8496a
--- /dev/null
+++ b/src/admin/components/icons/McpIcon.tsx
@@ -0,0 +1,25 @@
+/**
+ * External dependencies
+ */
+import type { SVGProps } from 'react';
+
+/**
+ * MCP Icon - Model Context Protocol logo.
+ */
+const McpIcon = ( props: SVGProps< SVGSVGElement > ) => (
+
+);
+
+export default McpIcon;
diff --git a/src/admin/components/icons/OllamaIcon.tsx b/src/admin/components/icons/OllamaIcon.tsx
new file mode 100644
index 00000000..eb7211df
--- /dev/null
+++ b/src/admin/components/icons/OllamaIcon.tsx
@@ -0,0 +1,25 @@
+/**
+ * External dependencies
+ */
+import type { SVGProps } from 'react';
+
+/**
+ * Ollama Icon
+ */
+const OllamaIcon = ( props: SVGProps< SVGSVGElement > ) => (
+
+);
+
+export default OllamaIcon;
diff --git a/src/admin/components/icons/OpenAiIcon.tsx b/src/admin/components/icons/OpenAiIcon.tsx
new file mode 100644
index 00000000..6d4803c3
--- /dev/null
+++ b/src/admin/components/icons/OpenAiIcon.tsx
@@ -0,0 +1,22 @@
+/**
+ * External dependencies
+ */
+import type { SVGProps } from 'react';
+
+/**
+ * OpenAI Icon
+ */
+const OpenAiIcon = ( props: SVGProps< SVGSVGElement > ) => (
+
+);
+
+export default OpenAiIcon;
diff --git a/src/admin/components/icons/OpenRouterIcon.tsx b/src/admin/components/icons/OpenRouterIcon.tsx
new file mode 100644
index 00000000..1d769c21
--- /dev/null
+++ b/src/admin/components/icons/OpenRouterIcon.tsx
@@ -0,0 +1,25 @@
+/**
+ * External dependencies
+ */
+import type { SVGProps } from 'react';
+
+/**
+ * OpenRouter Icon
+ */
+const OpenRouterIcon = ( props: SVGProps< SVGSVGElement > ) => (
+
+);
+
+export default OpenRouterIcon;
diff --git a/src/admin/components/icons/XaiIcon.tsx b/src/admin/components/icons/XaiIcon.tsx
new file mode 100644
index 00000000..aeca554c
--- /dev/null
+++ b/src/admin/components/icons/XaiIcon.tsx
@@ -0,0 +1,22 @@
+/**
+ * External dependencies
+ */
+import type { SVGProps } from 'react';
+
+/**
+ * xAI Icon
+ */
+const XaiIcon = ( props: SVGProps< SVGSVGElement > ) => (
+
+);
+
+export default XaiIcon;
diff --git a/src/admin/components/icons/index.ts b/src/admin/components/icons/index.ts
new file mode 100644
index 00000000..a950307d
--- /dev/null
+++ b/src/admin/components/icons/index.ts
@@ -0,0 +1,14 @@
+export { default as AiIcon } from './AiIcon';
+export { default as AnthropicIcon } from './AnthropicIcon';
+export { default as CloudflareIcon } from './CloudflareIcon';
+export { default as DeepSeekIcon } from './DeepSeekIcon';
+export { default as FalIcon } from './FalIcon';
+export { default as GoogleIcon } from './GoogleIcon';
+export { default as GroqIcon } from './GroqIcon';
+export { default as GrokIcon } from './GrokIcon';
+export { default as HuggingFaceIcon } from './HuggingFaceIcon';
+export { default as McpIcon } from './McpIcon';
+export { default as OpenAiIcon } from './OpenAiIcon';
+export { default as OpenRouterIcon } from './OpenRouterIcon';
+export { default as OllamaIcon } from './OllamaIcon';
+export { default as XaiIcon } from './XaiIcon';
diff --git a/src/admin/components/provider-icons.tsx b/src/admin/components/provider-icons.tsx
new file mode 100644
index 00000000..c7580348
--- /dev/null
+++ b/src/admin/components/provider-icons.tsx
@@ -0,0 +1,56 @@
+/**
+ * External dependencies
+ */
+import type { ComponentType, SVGProps } from 'react';
+
+/**
+ * Internal dependencies
+ */
+import {
+ AiIcon,
+ AnthropicIcon,
+ CloudflareIcon,
+ DeepSeekIcon,
+ FalIcon,
+ GoogleIcon,
+ GrokIcon,
+ GroqIcon,
+ HuggingFaceIcon,
+ OllamaIcon,
+ OpenAiIcon,
+ OpenRouterIcon,
+ XaiIcon,
+} from './icons';
+
+const ICON_COMPONENTS: Record< string, ComponentType< SVGProps< SVGSVGElement > > > =
+ Object.freeze( {
+ anthropic: AnthropicIcon,
+ openai: OpenAiIcon,
+ google: GoogleIcon,
+ fal: FalIcon,
+ 'fal-ai': FalIcon,
+ deepseek: DeepSeekIcon,
+ cloudflare: CloudflareIcon,
+ huggingface: HuggingFaceIcon,
+ ollama: OllamaIcon,
+ openrouter: OpenRouterIcon,
+ groq: GroqIcon,
+ grok: GrokIcon,
+ xai: XaiIcon,
+ default: AiIcon,
+ } );
+
+export const getProviderIconComponent = (
+ iconKey?: string,
+ fallbackKey?: string
+): ComponentType< SVGProps< SVGSVGElement > > => {
+ const normalized =
+ ( iconKey || fallbackKey || '' ).toLowerCase().replace( /\s+/g, '' );
+
+ return (
+ ICON_COMPONENTS[ normalized ] ||
+ ICON_COMPONENTS[ iconKey || '' ] ||
+ ICON_COMPONENTS[ fallbackKey || '' ] ||
+ ICON_COMPONENTS.default
+ );
+};
diff --git a/src/admin/hooks/usePersistedView.ts b/src/admin/hooks/usePersistedView.ts
new file mode 100644
index 00000000..7305648f
--- /dev/null
+++ b/src/admin/hooks/usePersistedView.ts
@@ -0,0 +1,99 @@
+/**
+ * WordPress dependencies
+ */
+import type { View } from '@wordpress/dataviews';
+import { useView } from '@wordpress/views';
+
+/**
+ * External dependencies
+ */
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+
+interface PersistedViewReturn< T extends View > {
+ view: T;
+ setView: ( next: T | ( ( prev: T ) => T ) ) => void;
+ resetView: () => void;
+ isModified: boolean;
+}
+
+const VIEW_KIND = 'root';
+const VIEW_NAME = 'ai-admin';
+
+/**
+ * Thin wrapper around `@wordpress/views` that mimics the previous
+ * usePersistedView signature so existing DataViews components can persist
+ * their view configuration using WordPress preferences (available in 6.9+).
+ */
+export function usePersistedView< T extends View >(
+ slug: string,
+ defaultView: T
+): PersistedViewReturn< T > {
+ const defaultQuery = useMemo(
+ () => ( {
+ page: defaultView.page ?? 1,
+ search: defaultView.search ?? '',
+ } ),
+ [ defaultView.page, defaultView.search ]
+ );
+
+ const [ queryParams, setQueryParams ] = useState( defaultQuery );
+
+ // Keep query params in sync if defaults change (should be rare).
+ useEffect( () => {
+ setQueryParams( ( previous ) => ( {
+ page: previous.page ?? defaultQuery.page,
+ search:
+ typeof previous.search === 'string'
+ ? previous.search
+ : defaultQuery.search,
+ } ) );
+ }, [ defaultQuery.page, defaultQuery.search ] );
+
+ const { view, updateView, resetToDefault, isModified } = useView( {
+ kind: VIEW_KIND,
+ name: VIEW_NAME,
+ slug,
+ defaultView,
+ queryParams,
+ onChangeQueryParams: ( params ) => {
+ setQueryParams( {
+ page:
+ typeof params.page === 'number'
+ ? params.page
+ : defaultQuery.page,
+ search:
+ typeof params.search === 'string'
+ ? params.search
+ : defaultQuery.search,
+ } );
+ },
+ } );
+
+ const latestViewRef = useRef< View >( view );
+ useEffect( () => {
+ latestViewRef.current = view;
+ }, [ view ] );
+
+ const setView = useCallback(
+ ( next: T | ( ( prev: T ) => T ) ) => {
+ updateView(
+ typeof next === 'function'
+ ? ( next as ( prev: T ) => T )( latestViewRef.current as T )
+ : next
+ );
+ },
+ [ updateView ]
+ );
+
+ const resetView = useCallback( () => {
+ resetToDefault();
+ setQueryParams( defaultQuery );
+ }, [ resetToDefault, defaultQuery ] );
+
+ return {
+ view: view as T,
+ setView,
+ resetView,
+ isModified,
+ };
+}
diff --git a/tests/Integration/Includes/Logging/AI_Request_Log_ManagerTest.php b/tests/Integration/Includes/Logging/AI_Request_Log_ManagerTest.php
new file mode 100644
index 00000000..fb01d2a3
--- /dev/null
+++ b/tests/Integration/Includes/Logging/AI_Request_Log_ManagerTest.php
@@ -0,0 +1,148 @@
+manager = new AI_Request_Log_Manager();
+ $this->manager->init();
+
+ global $wpdb;
+ $table = $wpdb->prefix . 'ai_request_logs';
+ $wpdb->query( "TRUNCATE TABLE {$table}" ); // phpcs:ignore WordPress.DB.PreparedSQL.NotPrepared
+
+ delete_option( AI_Request_Log_Manager::OPTION_LOGGING_ENABLED );
+ }
+
+ public function test_log_returns_false_when_logging_disabled(): void {
+ $this->manager->set_logging_enabled( false );
+
+ $result = $this->manager->log(
+ array(
+ 'type' => 'ui',
+ 'operation' => 'completion',
+ 'status' => 'success',
+ )
+ );
+
+ $this->assertFalse( $result );
+
+ global $wpdb;
+ $table = $wpdb->prefix . 'ai_request_logs';
+ $count = (int) $wpdb->get_var( "SELECT COUNT(*) FROM {$table}" ); // phpcs:ignore WordPress.DB.PreparedSQL.NotPrepared
+ $this->assertSame( 0, $count );
+ }
+
+ public function test_log_persists_entry_when_enabled(): void {
+ $this->manager->set_logging_enabled( true );
+
+ $log_id = $this->manager->log(
+ array(
+ 'type' => 'ui',
+ 'operation' => 'completion',
+ 'provider' => 'openai',
+ 'model' => 'gpt-5-nano',
+ 'duration_ms' => 120,
+ 'tokens_input' => 200,
+ 'tokens_output' => 50,
+ 'status' => 'success',
+ 'user_id' => get_current_user_id(),
+ 'context' => array( 'ability' => 'ai/example' ),
+ )
+ );
+
+ $this->assertNotFalse( $log_id );
+ $this->assertIsString( $log_id );
+
+ global $wpdb;
+ $table = $wpdb->prefix . 'ai_request_logs';
+ $row = $wpdb->get_row( // phpcs:ignore WordPress.DB.PreparedSQL.NotPrepared
+ $wpdb->prepare(
+ "SELECT operation, status, tokens_total, cost_estimate FROM {$table} WHERE log_id = %s",
+ $log_id
+ ),
+ ARRAY_A
+ );
+
+ $this->assertIsArray( $row );
+ $this->assertSame( 'completion', $row['operation'] );
+ $this->assertSame( 'success', $row['status'] );
+ $this->assertSame( 250, (int) $row['tokens_total'] );
+ $this->assertGreaterThan( 0, (float) $row['cost_estimate'] );
+ }
+
+ public function test_get_logs_search_matches_request_preview(): void {
+ $this->manager->set_logging_enabled( true );
+
+ $matching_id = $this->manager->log(
+ array(
+ 'type' => 'ai_client',
+ 'operation' => 'openai:images/generations',
+ 'status' => 'success',
+ 'context' => array(
+ 'input_preview' => 'Prompt: A llama sitting on a mountain',
+ ),
+ )
+ );
+
+ // Non matching entry to ensure search filters correctly.
+ $this->manager->log(
+ array(
+ 'type' => 'ai_client',
+ 'operation' => 'openai:images/generations',
+ 'status' => 'success',
+ 'context' => array(
+ 'input_preview' => 'Prompt: Sunset over the ocean',
+ ),
+ )
+ );
+
+ $result = $this->manager->get_logs(
+ array(
+ 'search' => 'llama',
+ )
+ );
+
+ $this->assertSame( 1, $result['total'] );
+ $this->assertSame( $matching_id, $result['items'][0]['id'] );
+ }
+
+ public function test_get_logs_search_falls_back_for_short_terms(): void {
+ $this->manager->set_logging_enabled( true );
+
+ $matching_id = $this->manager->log(
+ array(
+ 'type' => 'ai_client',
+ 'operation' => 'openai:responses',
+ 'status' => 'success',
+ 'context' => array(
+ 'input_preview' => 'AI prompt about colors',
+ ),
+ )
+ );
+
+ $result = $this->manager->get_logs(
+ array(
+ 'search' => 'AI',
+ )
+ );
+
+ $this->assertSame( 1, $result['total'] );
+ $this->assertSame( $matching_id, $result['items'][0]['id'] );
+ }
+}
diff --git a/webpack.config.js b/webpack.config.js
index 54f5e637..33adc83f 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -19,6 +19,11 @@ module.exports = {
'src/admin/settings',
'index.scss'
),
+ 'admin/ai-request-logs': path.resolve(
+ process.cwd(),
+ 'src/admin/ai-request-logs',
+ 'index.tsx'
+ ),
'experiments/abilities-explorer': path.resolve(
process.cwd(),
'src/experiments/abilities-explorer',
+
+ { metadata.url && (
+
+ ) }
+
+ { metadata.name }
+
+ { metadata.type === 'client'
+ ? __( 'Local', 'ai' )
+ : __( 'Cloud', 'ai' ) }
+
+
+ { activeModel && (
+
+ { sprintf(
+ /* translators: %s: AI model name. */
+ __( 'Requested model: %s', 'ai' ),
+ activeModel
+ ) }
+
+ ) }
+ { metadata.tooltip && (
+ { metadata.tooltip }
+ ) } + { topModels.length > 0 && ( +
+
+ { __( 'Available models', 'ai' ) }
+
+
+ ) }
+ -
+ { topModels.map( ( model ) => (
+
- + { model.name } + { model.capabilities?.length > 0 && ( + + { model.capabilities.join( ', ' ) } + + ) } + + ) ) } +