checkpoint: pre-audit baseline state

assets/js/settings-v2.js

@@ -20,6 +20,7 @@
 		models: {},
 		currentPage: 1,
 		perPage: 25,
+		childPerPage: 20,
 		filters: {
 			post: '',
 			model: '',
@@ -475,6 +476,7 @@
 				if (response.success) {
 					renderCostLogTable(response.data);
 					updateCostLogStats(response.data.stats);
+					renderActionSummary(response.data.stats);
 					updateFilterOptions(response.data.filters);
 					renderPagination(response.data);
 				} else {
@@ -507,6 +509,8 @@
 		let html = '';
 		records.forEach((group, index) => {
 			const collapseId = `collapse-post-${group.post_id}-${index}`;
+			const detailsTotal = Number(group.details_total || (group.details || []).length || 0);
+			const detailsInitialEnd = Math.min(state.childPerPage, detailsTotal);
 			const postCell = group.post_link
 				? `<a href="${group.post_link}" class="text-decoration-none" target="_blank">${escapeHtml(group.post_title)}</a>`
 				: `<span class="text-muted">${escapeHtml(group.post_title)}</span>`;
@@ -526,9 +530,13 @@
 			`;
 
 			// Collapsible details row
+			const detailsHint = detailsTotal > 0
+				? `<div class="px-3 py-1 small text-muted border-bottom">Showing <span class="wpaw-child-range-start">1</span>-<span class="wpaw-child-range-end">${detailsInitialEnd}</span> of ${detailsTotal} calls</div>`
+				: '';
 			html += `
-				<tr class="collapse wpaw-collapse-row" id="${collapseId}">
+				<tr class="collapse wpaw-collapse-row" id="${collapseId}" data-child-total="${detailsTotal}">
 					<td colspan="3" class="p-0">
+						${detailsHint}
 						<div class="table-responsive">
 							<table class="table table-sm mb-0 wpaw-details-table">
 								<thead>
@@ -541,7 +549,7 @@
 										<th class="text-end px-3 small text-muted"><?php esc_html_e( 'Cost', 'wp-agentic-writer' ); ?></th>
 									</tr>
 								</thead>
-								<tbody>
+								<tbody class="wpaw-details-body">
 			`;
 
 			// Detail rows
@@ -562,6 +570,12 @@
 								</tbody>
 							</table>
 						</div>
+						${detailsTotal > state.childPerPage ? `
+						<div class="d-flex justify-content-between align-items-center px-3 py-2 border-top wpaw-child-pager">
+							<button type="button" class="button button-small wpaw-child-prev" disabled>Prev</button>
+							<span class="small text-muted">Page <span class="wpaw-child-page">1</span> of <span class="wpaw-child-pages">${Math.ceil(detailsTotal / state.childPerPage)}</span></span>
+							<button type="button" class="button button-small wpaw-child-next">Next</button>
+						</div>` : ''}
 					</td>
 				</tr>
 			`;
@@ -577,15 +591,55 @@
 				const isExpanded = $(target).hasClass('show');
 				$icon.toggleClass('dashicons-arrow-right-alt2', !isExpanded);
 				$icon.toggleClass('dashicons-arrow-down-alt2', isExpanded);
+				if (isExpanded) {
+					renderChildPage($(target), 1);
+				}
 			}, 10);
 		});
 
+		$(document).off('click.wpawChildPager').on('click.wpawChildPager', '.wpaw-child-prev, .wpaw-child-next', function () {
+			const $btn = $(this);
+			const $row = $btn.closest('.wpaw-collapse-row');
+			const currentPage = Number($row.find('.wpaw-child-page').text() || 1);
+			const totalPages = Number($row.find('.wpaw-child-pages').text() || 1);
+			const nextPage = $btn.hasClass('wpaw-child-prev')
+				? Math.max(1, currentPage - 1)
+				: Math.min(totalPages, currentPage + 1);
+			renderChildPage($row, nextPage);
+		});
+
+		// Ensure initial expanded state also starts at page 1 (20 rows),
+		// not full unpaginated detail rows.
+		$('.wpaw-collapse-row').each(function () {
+			renderChildPage($(this), 1);
+		});
+
 		// Update records info
 		const start = (data.current_page - 1) * data.per_page + 1;
 		const end = Math.min(data.current_page * data.per_page, data.total_items);
 		$('#wpaw-records-info').text(`Showing ${start}-${end} of ${data.total_items} posts`);
 	}
 
+	function renderChildPage($row, page) {
+		const perPage = state.childPerPage || 20;
+		const $rows = $row.find('.wpaw-details-body tr');
+		const totalRows = $rows.length;
+		const totalPages = Math.max(1, Math.ceil(totalRows / perPage));
+		const safePage = Math.max(1, Math.min(totalPages, page));
+		const startIdx = (safePage - 1) * perPage;
+		const endIdx = Math.min(totalRows, startIdx + perPage);
+
+		$rows.hide();
+		$rows.slice(startIdx, endIdx).show();
+
+		$row.find('.wpaw-child-page').text(safePage);
+		$row.find('.wpaw-child-pages').text(totalPages);
+		$row.find('.wpaw-child-range-start').text(totalRows === 0 ? 0 : startIdx + 1);
+		$row.find('.wpaw-child-range-end').text(endIdx);
+		$row.find('.wpaw-child-prev').prop('disabled', safePage <= 1);
+		$row.find('.wpaw-child-next').prop('disabled', safePage >= totalPages);
+	}
+
 	/**
 	 * Update cost log stats
 	 */
@@ -597,6 +651,34 @@
 		$('#wpaw-stat-avg').text('$' + stats.avg_per_post);
 	}
 
+	function renderActionSummary(stats) {
+		const $tbody = $('#wpaw-action-summary-tbody');
+		if (!$tbody.length) return;
+
+		const rows = Array.isArray(stats?.action_summary) ? stats.action_summary : [];
+		if (rows.length === 0) {
+			$tbody.html('<tr><td colspan="4" class="text-center text-muted py-3">No action cost records yet.</td></tr>');
+			return;
+		}
+
+		const formatAction = (action) => String(action || '')
+			.replace(/_/g, ' ')
+			.replace(/\b\w/g, c => c.toUpperCase());
+
+		let html = '';
+		rows.forEach((row) => {
+			html += `
+				<tr>
+					<td>${escapeHtml(formatAction(row.action))}</td>
+					<td class="text-end">${Number(row.calls || 0)}</td>
+					<td class="text-end">$${escapeHtml(String(row.total || '0.0000'))}</td>
+					<td class="text-end">$${escapeHtml(String(row.average || '0.0000'))}</td>
+				</tr>
+			`;
+		});
+		$tbody.html(html);
+	}
+
 	/**
 	 * Update filter dropdown options
 	 */