Pivot to @wordpress/dataviews for the AI Orders table

[pierorocca]

Summary

Replaces the @woocommerce/components TableCard adoption from PR #24 (which rendered DOM but never loaded its CSS on our submenu page) with @wordpress/dataviews in table-view mode. Also shifts the section from aggregate "Revenue by Agent" to per-order "Recent AI Orders" so merchants can click through to individual orders from the dashboard.

Why DataViews, not Woo TableCard

PR #24's enqueue dance didn't work. The wp_style_is('registered') guards for wc-components / wc-admin-layout / wc-experimental silently passed through because the handles aren't registered on non-wc-admin pages. Result: the table HTML rendered but looked broken ("1Total orders" with no spacing, unstyled column headers).

DataViews sidesteps the problem entirely — the WP dep-extraction plugin lists it in BUNDLED_PACKAGES, so webpack bundles the JS into our build. The CSS is copied to our build output by a postbuild script and flows through the plugin's existing CSS enqueue path. Zero dependency on the merchant's wc-admin asset registration.

Column set (matches WC Orders convention)

Order	Date	Status	Agent	Total
#123 → edit screen	Apr 18 (relative)	colored pill	Gemini	$55.36

• Order links to the HPOS-aware order-edit URL
• Date uses WC's own wc_format_datetime with the ISO date in a tooltip
• Status is a colored pill using WC's own palette (inline styles — wc-admin's .order-status CSS isn't loaded on our page)
• Agent is canonicalized through KNOWN_AGENT_HOSTS server-side, so legacy orders with raw hostnames (gemini.google.com) display as brand names (Gemini). DB meta is untouched — display-only.
• Total uses Intl.NumberFormat for locale-aware currency

New REST endpoint

GET /wc/v3/ai-syndication/admin/recent-orders?per_page=10

Returns orders normalized for the DataViews row shape. wc_get_orders() with meta_key = AGENT_META_KEY bounds the scan to AI-attributed orders only.

Bundle size

	Before	After
JS bundle	~37 KB	~262 KB
CSS file	none	74 KB (unminified)

DataViews is bundled into our build. This is a dashboard-only page loaded once per session, so the size is acceptable.

Files

Frontend: new ai-orders-table.js, deleted agent-revenue-table.js, data layer extended with fetchRecentOrders / SET_RECENT_ORDERS / getRecentOrders, colors.link token added.

Backend: new get_recent_orders method in admin controller; removed the wc-components / wc-admin-layout / wc-experimental enqueue loop (no longer needed).

Build/ops: new scripts/copy-dataviews-css.js + postbuild npm script, @wordpress/dataviews promoted to direct devDependency, release workflow excludes scripts/ from the zip.

Docs: AGENTS.md Styling section rewritten — the three-part Woo pattern is replaced with the DataViews recipe and an externalized-vs-bundled table explaining the runtime model difference.

Test plan

• 42 Jest tests pass
• 379 PHPUnit / 1075 assertions pass
• PHPCS clean
• PHPStan clean
• ESLint clean
• Webpack build + postbuild emits both ai-syndication-settings.js AND ai-syndication-settings.css
• Manual (critical): on your staging store, Overview tab shows the Recent AI Orders table with proper DataViews styling — wc-admin-looking table, pagination controls, sortable columns
• Manual: the legacy gemini.google.com test order now shows as Gemini (server-side canonicalization)
• Manual: clicking #{order_number} navigates to the order edit screen

Ships as

Merged to main, not tagged. Queues with PRs #21, #22, #23 behind the next release signal. Should effectively replace PR #24's visible work.

🤖 Generated with Claude Code