checkpoint: pre-audit baseline state

assets/css/settings-v2.css

@@ -18,6 +18,10 @@
 	color: var(--wpaw-primary);
 }
 
+.form-check.mt-3 input[type=checkbox] {
+    margin-top: .35rem;
+}
+
 /* Card enhancements */
 .wpaw-settings-v2-wrap .card {
 	background: transparent !important;

assets/css/sidebar.css

@@ -33,7 +33,6 @@
 .interface-complementary-area__fill:has(#wp-agentic-writer\:wp-agentic-writer),
 #wp-agentic-writer\:wp-agentic-writer svg {
     margin-bottom: -3px;
-    width: 18px;
 }
 
 .components-tooltip img {
@@ -494,6 +493,96 @@ input.wpaw-plan-section-check:checked::before {
     margin-bottom: 10px;
 }
 
+.wpaw-refinement-lock-banner {
+    background: #dbeafe;
+    color: #1e3a8a;
+    padding: 8px 10px;
+    border: 1px solid #93c5fd;
+    font-size: 12px;
+    margin-bottom: 10px;
+}
+
+.wpaw-refine-confirm-overlay {
+    position: absolute;
+    inset: 0;
+    z-index: 1200;
+    background: rgba(10, 16, 27, 0.72);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 16px;
+}
+
+.wpaw-refine-confirm-modal {
+    width: 100%;
+    max-width: 420px;
+    background: #111827;
+    color: #e5e7eb;
+    border: 1px solid #334155;
+    border-radius: 8px;
+    padding: 16px;
+    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
+}
+
+.wpaw-refine-confirm-title {
+    font-size: 15px;
+    font-weight: 700;
+    margin-bottom: 8px;
+}
+
+.wpaw-refine-confirm-body {
+    font-size: 13px;
+    line-height: 1.5;
+    color: #cbd5e1;
+    margin-bottom: 12px;
+}
+
+.wpaw-refine-confirm-actions {
+    display: flex;
+    justify-content: flex-end;
+    gap: 8px;
+    margin-top: 10px;
+}
+
+.wpaw-block-refining {
+    position: relative;
+    outline: 2px dashed #3b82f6;
+    outline-offset: 2px;
+}
+
+.wpaw-block-refining::before {
+    content: 'REFINING';
+    position: absolute;
+    top: -12px;
+    right: 8px;
+    background: #2563eb;
+    color: #fff;
+    font-size: 10px;
+    line-height: 1;
+    padding: 3px 6px;
+    border-radius: 4px;
+    z-index: 20;
+    letter-spacing: 0;
+    font-weight: 700;
+}
+
+/* Refinement lock: prevent content editing while still allowing page scroll */
+.wpaw-refining-locked .editor-styles-wrapper [contenteditable="true"],
+.wpaw-refining-locked .block-editor-rich-text__editable,
+.wpaw-refining-locked .block-editor-writing-flow [role="textbox"] {
+    pointer-events: none !important;
+    user-select: none !important;
+    caret-color: transparent !important;
+}
+
+.wpaw-refining-locked .block-editor-block-toolbar,
+.wpaw-refining-locked .block-editor-default-block-appender,
+.wpaw-refining-locked .editor-block-list-item__inline-menu,
+.wpaw-refining-locked .block-editor-inserter {
+    pointer-events: none !important;
+    opacity: 0.5;
+}
+
 .wpaw-ai-response pre {
     background: #f1f5f9;
     padding: 10px;
@@ -1384,6 +1473,7 @@ input.wpaw-plan-section-check:checked::before {
     border-bottom: 1px solid #3c3c3c;
     font-size: 11px;
     text-transform: uppercase;
+    background-color: #2c2c2c;
 }
 
 .wpaw-cost-table td {
@@ -3537,13 +3627,12 @@ input.wpaw-plan-section-check:checked::before {
 
 .wpaw-welcome-icon {
     display: block;
-    margin-bottom: 1rem;
     color: #2271b1;
 }
 
 .wpaw-welcome-icon svg {
-    width: 48px;
-    height: 48px;
+    width: 64px;
+    height: 64px;
 }
 
 .wpaw-welcome-title {
@@ -3619,6 +3708,23 @@ input.wpaw-plan-section-check:checked::before {
     color: #2271b1;
 }
 
+.wpaw-session-list {
+    max-height: 35vh;
+    overflow-y: auto;
+    padding-right: 2px;
+    margin-bottom: 8px;
+}
+
+.wpaw-session-open-btn {
+    display: block;
+    min-width: 0;
+    padding: 0;
+}
+
+.wpaw-session-open-btn:disabled {
+    opacity: 0.65;
+}
+
 .wpaw-welcome-start-btn {
     width: 100%;
     padding: 12px 24px !important;
@@ -4482,4 +4588,4 @@ input.wpaw-plan-section-check:checked::before {
 .wpaw-provider-badge[title*="Warning"],
 .wpaw-provider-info:has(.wpaw-fallback) {
     color: #f59e0b;
-}
+}

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
 	 */