feat(web): refine typography and skill discovery

.agents/plans/pr-reconciliation-site-check.plan.md

@@ -0,0 +1,67 @@
+---
+name: pr-reconciliation-site-check
+overview: "Reconcile the approved Stripe and typography PRs with main, verify their combined behavior, and investigate the reported site failure."
+todos:
+  - id: verify-live-failure
+    content: Reproduce the reported site failure and inspect production deployment and browser evidence
+    status: in_progress
+  - id: reconcile-stripe
+    content: Preserve null-body and malformed-ID validation tests while merging current main into PR 161
+    status: completed
+  - id: reconcile-typography
+    content: Resolve PR 171 font configuration conflicts and preserve the merged mobile theme control
+    status: completed
+  - id: verify-and-ship
+    content: Run local gates, review current PR checks and comments, squash-merge approved changes, and verify production
+    status: in_progress
+isProject: false
+---
+
+# PR reconciliation and site verification
+
+## Goal
+
+Finish the approved PR merges and restore any reproduced site failure, with production verification.
+
+## Scope
+
+- Reconcile PRs 161 and 171; review the newly opened PR 172 under the existing open-PR request.
+- Inspect public pages, browser errors, deployment state, and relevant runtime logs.
+- Preserve authentication, payment, chain, and data semantics.
+
+## Files
+
+- `web/__tests__/api/stripe-routes.test.ts`: retain the null-body and malformed-UUID regressions.
+- `web/app/globals.css` and `web/tailwind.config.ts`: retain Crimson Pro titles, Inter body/UI, and Inconsolata code.
+- `web/components/AppNavbar.tsx`: verify the merged mobile theme control remains available.
+- `web/app/skills/MarketplaceClient.tsx`: retain the loading button until the final requested batch finishes.
+- `web/app/globals.css` and `web/__tests__/app/typography-utilities.test.ts`: register semantic fonts in the active Tailwind v4 theme and compile-test font variants.
+- Any site-failure fix must follow a reproduced cause; record exact files here before editing.
+
+## Verification
+
+Run Node 24, focused Stripe tests, `npm run format:check`, web lint, typecheck, full web Vitest, `next build --webpack`, and `git diff --check`. Verify current PR head checks before squash merging and inspect the resulting production deployment and public browser behavior.
+
+## Rollout and rollback
+
+Update PR branches with signed merge commits, preserving history. Squash-merge after verification. If a reproduced release regression requires rollback, use a verified prior deployment or a focused revert; do not change live data or feature flags.
+
+## Evidence (2026-09-05)
+
+- Production alias points to deployment `dpl_E9bynP9hLSKYRTMoSQan4pHWNWd4`, commit `ccb432b`, state READY.
+- Marketplace loaded 94 skills, pagination reached page 2, and browser error logs were empty.
+- Ports 3000, 3001, and 3002 have no local listener; the user has been asked which page/action fails while independent work continues.
+- PR 161 conflicts only in its Stripe test insertion; PR 171 conflicts in global CSS and Tailwind font mapping.
+- PR 161 resolution passed format, lint, typecheck, all 948 tests, and the webpack production build. The build required network access for Google Fonts and used expected missing-database fallbacks in the isolated checkout. Signed commit `ea7a47c` was published.
+- Local marketplace at port 3002 loaded 9 then 18 cards. Searching for `subagent` after appending correctly replaced the list with one result; the suspected search regression was ruled out.
+- UI review found the end-of-list label can replace the button while the final page is still in flight, because the requested page advances before its response. Keep the button mounted and disabled until completion; no pagination/API semantics change.
+- The final-batch browser check showed a disabled `Loading more` button at 9/12, followed by 12/12 and the end label, with no console errors.
+- Skill detail computed styles showed the page title in Crimson Pro, prose in Inter, and code in Inconsolata, but Markdown headings incorrectly inherited Inter. `prose-headings:font-display` has no generated utility because the legacy TypeScript Tailwind config is not loaded by the v4 CSS entrypoint. Register the font tokens with `@theme inline` and verify generated CSS plus rendered styles.
+- All four compiled-utility regression tests failed before the theme mapping and passed afterward. The browser confirmed the corrected skill Markdown heading in Crimson Pro, body in Inter, and code in Inconsolata in dark theme. Light-theme marketplace and narrow-layout carousel navigation (01/03 to 02/03) also passed without horizontal overflow.
+- PRs 172 and 161 were squash-merged after green CI and Vercel builds; both are integrated into this branch from `origin/main` at `00972b7`.
+- Final combined local gate: format, lint, typecheck, 129 test files / 953 tests, and webpack production build all passed. Build retains the existing non-blocking `ox` dynamic-dependency warning. Real wallet signing and paid checkout were not exercised.
+- Production homepage, marketplace, dashboard, and sign-in page loaded successfully. Production runtime error checks returned no errors; no specific failing public URL/action has been supplied yet.
+
+## Blockers
+
+- The reported site failure is not yet reproduced; continue public-route checks and await the user's failing URL/action.

web/__tests__/app/typography-utilities.test.ts

@@ -0,0 +1,32 @@
+import fs from "node:fs/promises";
+import path from "node:path";
+import { compile } from "@tailwindcss/node";
+import { beforeAll, describe, expect, it } from "vitest";
+
+describe("semantic typography utilities", () => {
+  const cases = [
+    ["hover:font-title", "--font-crimson-pro"],
+    ["prose-headings:font-display", "--font-crimson-pro"],
+    ["hover:font-sans", "--font-inter"],
+    ["hover:font-mono", "--font-inconsolata"],
+  ] as const;
+  let css: string;
+
+  beforeAll(async () => {
+    const stylesheet = path.join(process.cwd(), "app/globals.css");
+    const compiler = await compile(await fs.readFile(stylesheet, "utf8"), {
+      base: path.dirname(stylesheet),
+      onDependency: () => {},
+    });
+    css = compiler.build(cases.map(([utility]) => utility));
+  });
+
+  it.each(cases)("generates %s using %s", (utility, fontVariable) => {
+    // Compile real variants: plain CSS classes alone cannot provide these.
+    const selector = `.${utility.replace(":", "\\:")}`;
+    const start = css.indexOf(`${selector} {`);
+    expect(start).toBeGreaterThanOrEqual(0);
+    const declaration = css.slice(start).match(/font-family:\s*([^;]+);/);
+    expect(declaration?.[1]).toContain(`var(${fontVariable})`);
+  });
+});

web/app/agent-reputation-system/page.tsx

@@ -105,7 +105,7 @@ export default function AgentReputationSystemPage() {
           AgentVouch is an on-chain agent reputation system for AI agents.
         </p>
 
-        <h2 className="text-xl font-heading font-bold text-gray-900 dark:text-white mb-3">
+        <h2 className="text-xl font-title font-bold text-gray-900 dark:text-white mb-3">
           Why AI agents need a reputation system
         </h2>
         <p className="mb-6">
@@ -121,7 +121,7 @@ export default function AgentReputationSystemPage() {
           for the concrete failure mode.
         </p>
 
-        <h2 className="text-xl font-heading font-bold text-gray-900 dark:text-white mb-3">
+        <h2 className="text-xl font-title font-bold text-gray-900 dark:text-white mb-3">
           How an agent reputation system works
         </h2>
         <p className="mb-4">
@@ -147,7 +147,7 @@ export default function AgentReputationSystemPage() {
           </li>
         </ul>
 
-        <h2 className="text-xl font-heading font-bold text-gray-900 dark:text-white mb-3">
+        <h2 className="text-xl font-title font-bold text-gray-900 dark:text-white mb-3">
           How AgentVouch implements it
         </h2>
         <p className="mb-6">
@@ -169,7 +169,7 @@ export default function AgentReputationSystemPage() {
           .
         </p>
 
-        <h2 className="text-xl font-heading font-bold text-gray-900 dark:text-white mb-3">
+        <h2 className="text-xl font-title font-bold text-gray-900 dark:text-white mb-3">
           Agent reputation system vs. reputation oracle
         </h2>
         <p className="mb-6">
@@ -187,12 +187,12 @@ export default function AgentReputationSystemPage() {
           </Link>
         </p>
 
-        <h2 className="text-xl font-heading font-bold text-gray-900 dark:text-white mb-3">
+        <h2 className="text-xl font-title font-bold text-gray-900 dark:text-white mb-3">
           Frequently asked questions
         </h2>
         <div className="space-y-5 mb-8">
           <div>
-            <h3 className="font-heading font-bold text-gray-900 dark:text-white mb-1">
+            <h3 className="font-title font-bold text-gray-900 dark:text-white mb-1">
               What is an agent reputation system?
             </h3>
             <p>
@@ -203,7 +203,7 @@ export default function AgentReputationSystemPage() {
             </p>
           </div>
           <div>
-            <h3 className="font-heading font-bold text-gray-900 dark:text-white mb-1">
+            <h3 className="font-title font-bold text-gray-900 dark:text-white mb-1">
               How does AgentVouch score agent reputation?
             </h3>
             <p>

web/app/author/[pubkey]/page.tsx

@@ -1163,7 +1163,7 @@ export default function AuthorProfilePage() {
                 <div className="mb-5 pr-8">
                   <h2
                     id="report-author-title"
-                    className="text-xl font-heading font-bold text-gray-900 dark:text-white"
+                    className="text-xl font-title font-bold text-gray-900 dark:text-white"
                   >
                     Report this author
                   </h2>
@@ -1386,7 +1386,7 @@ export default function AuthorProfilePage() {
 
         {authorDisputes.length > 0 && (
           <div className="rounded-sm border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900 p-6 mb-6">
-            <h2 className="text-lg font-heading font-bold text-gray-900 dark:text-white mb-4 flex items-center gap-2">
+            <h2 className="text-lg font-title font-bold text-gray-900 dark:text-white mb-4 flex items-center gap-2">
               <FiAlertTriangle className="text-[var(--lobster-accent)]" />{" "}
               Author Disputes
             </h2>
@@ -1448,7 +1448,7 @@ export default function AuthorProfilePage() {
 
         {isOwnProfile && profile && (
           <div className="rounded-sm border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900 p-6 mb-6">
-            <h2 className="text-lg font-heading font-bold text-gray-900 dark:text-white mb-2">
+            <h2 className="text-lg font-title font-bold text-gray-900 dark:text-white mb-2">
               Link Solana Agent Registry
             </h2>
             <p className="text-sm text-gray-500 dark:text-gray-400 mb-4">
@@ -1656,7 +1656,7 @@ export default function AuthorProfilePage() {
               <div className="flex items-center justify-center text-[var(--lobster-accent)] mb-1">
                 {stat.icon}
               </div>
-              <div className="text-xl font-heading font-bold text-gray-900 dark:text-white">
+              <div className="text-xl font-title font-bold text-gray-900 dark:text-white">
                 {stat.value}
               </div>
               <div className="text-xs text-gray-400 dark:text-gray-500 font-medium uppercase tracking-wide">
@@ -1670,7 +1670,7 @@ export default function AuthorProfilePage() {
           <div className="rounded-sm border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900 p-6 mb-6">
             <div className="flex flex-col gap-4 md:flex-row md:items-start md:justify-between">
               <div className="space-y-2">
-                <h2 className="text-lg font-heading font-bold text-gray-900 dark:text-white flex items-center gap-2">
+                <h2 className="text-lg font-title font-bold text-gray-900 dark:text-white flex items-center gap-2">
                   <FiShield className="text-[var(--sea-accent)]" /> Manage Base
                   Self Stake
                 </h2>
@@ -1758,7 +1758,7 @@ export default function AuthorProfilePage() {
           <div className="rounded-sm border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900 p-6 mb-6">
             <div className="flex flex-col gap-4 md:flex-row md:items-start md:justify-between">
               <div className="space-y-2">
-                <h2 className="text-lg font-heading font-bold text-gray-900 dark:text-white flex items-center gap-2">
+                <h2 className="text-lg font-title font-bold text-gray-900 dark:text-white flex items-center gap-2">
                   <FiShield className="text-[var(--sea-accent)]" /> Your Backing
                 </h2>
                 <p className="text-sm text-gray-500 dark:text-gray-400">
@@ -1802,7 +1802,7 @@ export default function AuthorProfilePage() {
         {/* Vouch for this author */}
         {!isOwnProfile && (
           <div className="rounded-sm border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900 p-6 mb-6">
-            <h2 className="text-lg font-heading font-bold text-gray-900 dark:text-white mb-3 flex items-center gap-2">
+            <h2 className="text-lg font-title font-bold text-gray-900 dark:text-white mb-3 flex items-center gap-2">
               <FiZap className="text-[var(--lobster-accent)]" /> Vouch for this
               Author
             </h2>
@@ -1916,7 +1916,7 @@ export default function AuthorProfilePage() {
 
         {!isOwnProfile && connected && viewerVouch && (
           <div className="rounded-sm border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900 p-6 mb-6">
-            <h2 className="text-lg font-heading font-bold text-gray-900 dark:text-white mb-3 flex items-center gap-2">
+            <h2 className="text-lg font-title font-bold text-gray-900 dark:text-white mb-3 flex items-center gap-2">
               <FiTrendingUp className="text-[var(--lobster-accent)]" /> Voucher
               Revenue
             </h2>
@@ -2024,7 +2024,7 @@ export default function AuthorProfilePage() {
 
         {/* Skills */}
         <div className="rounded-sm border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900 p-6 mb-6">
-          <h2 className="text-lg font-heading font-bold text-gray-900 dark:text-white mb-4 flex items-center gap-2">
+          <h2 className="text-lg font-title font-bold text-gray-900 dark:text-white mb-4 flex items-center gap-2">
             <FiPackage className="text-[var(--lobster-accent)]" /> Published
             Skills
           </h2>
@@ -2045,7 +2045,7 @@ export default function AuthorProfilePage() {
                     className="rounded-sm border border-gray-100 dark:border-gray-800 bg-gray-50 dark:bg-gray-800 p-4 hover:border-gray-300 dark:hover:border-gray-600 transition block"
                   >
                     <div className="flex items-start justify-between gap-2 mb-2">
-                      <h3 className="font-heading font-bold text-gray-900 dark:text-white text-sm truncate">
+                      <h3 className="font-title font-bold text-gray-900 dark:text-white text-sm truncate">
                         {skill.name}
                       </h3>
                       {skill.price_usdc_micros ? (
@@ -2097,7 +2097,7 @@ export default function AuthorProfilePage() {
                       className="rounded-sm border border-gray-100 dark:border-gray-800 bg-gray-50 dark:bg-gray-800 p-4 hover:border-gray-300 dark:hover:border-gray-600 transition block"
                     >
                       <div className="flex items-start justify-between gap-2 mb-2">
-                        <h3 className="font-heading font-bold text-gray-900 dark:text-white text-sm truncate">
+                        <h3 className="font-title font-bold text-gray-900 dark:text-white text-sm truncate">
                           {skill.name || "Untitled"}
                         </h3>
                         {priceUsdcMicros ? (
@@ -2134,7 +2134,7 @@ export default function AuthorProfilePage() {
         {/* Vouchers (who vouches for this author) */}
         {vouchesReceived.length > 0 && (
           <div className="rounded-sm border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900 p-6 mb-6">
-            <h2 className="text-lg font-heading font-bold text-gray-900 dark:text-white mb-4 flex items-center gap-2">
+            <h2 className="text-lg font-title font-bold text-gray-900 dark:text-white mb-4 flex items-center gap-2">
               <FiUsers className="text-[var(--lobster-accent)]" /> Vouchers
             </h2>
             <p className="text-sm text-gray-500 dark:text-gray-400 mb-4">
@@ -2209,7 +2209,7 @@ export default function AuthorProfilePage() {
         {/* Vouching for (who this author vouches for) */}
         {vouchesGiven.length > 0 && (
           <div className="rounded-sm border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900 p-6 mb-6">
-            <h2 className="text-lg font-heading font-bold text-gray-900 dark:text-white mb-4 flex items-center gap-2">
+            <h2 className="text-lg font-title font-bold text-gray-900 dark:text-white mb-4 flex items-center gap-2">
               <FiZap className="text-[var(--lobster-accent)]" /> Vouching For
             </h2>
             <div className="space-y-2">
@@ -2268,7 +2268,7 @@ export default function AuthorProfilePage() {
           <div className="rounded-sm border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900 p-6 mb-6">
             <div className="flex flex-col gap-4 md:flex-row md:items-start md:justify-between">
               <div className="space-y-2">
-                <h2 className="text-lg font-heading font-bold text-gray-900 dark:text-white flex items-center gap-2">
+                <h2 className="text-lg font-title font-bold text-gray-900 dark:text-white flex items-center gap-2">
                   <FiShield className="text-[var(--lobster-accent)]" /> Report
                   this author
                 </h2>