feat: remove "Tested with" LLM logic and add virtualized infinite scroll to /souls

Remove the testedWithModels field and all associated UI (model badges,
model filter, JSON-LD targetProduct) from schema, backend, types, pages,
components, and documentation.

Replace the fixed 50-item load on /souls with cursor-based pagination
(24 per page) and TanStack Virtual row virtualization so only visible
cards are in the DOM. Infinite scroll loads the next page automatically
as the user scrolls near the bottom.

Made-with: Cursor

Author: thedaviddias

.gitignore

@@ -32,6 +32,7 @@ npm-debug.log*
 .vercel
 .env*.local
 
+./agents
 **/.claude
 .claude
 .cursor

AGENTS.md

@@ -0,0 +1,19 @@
+# AGENTS.md
+
+## Learned User Preferences
+
+- Prefer TanStack ecosystem libraries when applicable (e.g. TanStack Virtual for list virtualization)
+- Test UI changes in the browser after implementation; do not assume visual correctness from code alone
+- Based in Canada; privacy compliance must account for PIPEDA and Quebec Law 25
+- No session replay or invasive tracking without a consent banner; basic analytics is acceptable under implied consent
+- Uses Typefully for drafting social media announcements
+- Prefers `pnpm validate` as the single pre-commit check (Biome lint/format + TypeScript typecheck)
+
+## Learned Workspace Facts
+
+- Convex dev deployment slug: `careful-kangaroo-28` (site URL: `https://careful-kangaroo-28.convex.site`)
+- Dev server uses `portless` tool; local URL is `http://souls.localhost:<port>/` (not `localhost:3000`)
+- Convex env var `SITE_URL` must match the local portless URL for auth redirects to work
+- OpenPanel analytics is proxied through `/api/op`; only active in production (gated by `AnalyticsProvider`)
+- `@tanstack/react-virtual` is used for the `/souls` browse page grid virtualization with cursor-based infinite scroll
+- GitHub OAuth env vars (`AUTH_GITHUB_ID`, `AUTH_GITHUB_SECRET`) live in Convex dashboard, not `.env.local`

CONTRIBUTING.md

@@ -45,7 +45,7 @@ You can also **fork** an existing soul (from its page) or **edit** your own soul
 - [ ] Category selected (see list below)
 - [ ] 3–5 relevant tags selected
 - [ ] Core truths, boundaries, and vibe are in the markdown
-- [ ] You've tested the soul with at least one LLM
+- [ ] You've tested the soul before publishing
 - [ ] No typos or grammar issues
 - [ ] Slug is lowercase-with-hyphens and unique
 

apps/web/__mocks__/convex-react.ts

@@ -13,7 +13,9 @@ export function useMutation(_mutation: any) {
 }
 
 export function useConvex() {
-  return {}
+  return {
+    query: async () => ({ items: [], nextCursor: null }),
+  }
 }
 
 export function useConvexAuth() {

apps/web/app/page.tsx

@@ -68,7 +68,6 @@ export default async function Home() {
     upvotes: item.soul.stats?.upvotes || 0,
     versions: item.soul.stats?.versions ?? 1,
     featured: item.soul.featured || false,
-    tested_with: (item.soul.testedWithModels || []).map((t: { model: string }) => t.model),
     category_id: item.category?._id || '',
     category: item.category
       ? {

apps/web/app/souls/[handle]/[slug]/page.tsx

@@ -43,7 +43,6 @@ interface RelatedSoulData {
     upvotes?: number
   }
   featured?: boolean
-  testedWithModels?: Array<{ model: string }>
   createdAt: number
   updatedAt: number
 }
@@ -129,7 +128,6 @@ export default async function SoulPage({ params }: PageProps) {
         comments: soul.stats?.comments || 0,
         views: soul.stats?.views || 0,
       },
-      testedWithModels: (soul.testedWithModels || []).map((t: { model: string }) => t.model),
       featured: soul.featured || false,
       createdAt: soul.createdAt,
       updatedAt: soul.updatedAt,
@@ -174,7 +172,6 @@ export default async function SoulPage({ params }: PageProps) {
         stars: s.stats?.stars || 0,
         upvotes: s.stats?.upvotes || 0,
         featured: s.featured || false,
-        tested_with: (s.testedWithModels || []).map((t) => t.model),
         category_id: category?._id || '',
         category: category
           ? {
@@ -202,7 +199,6 @@ export default async function SoulPage({ params }: PageProps) {
       stars: s.stats?.stars || 0,
       upvotes: s.stats?.upvotes || 0,
       featured: s.featured || false,
-      tested_with: [],
       category_id: category?._id || '',
       category: category
         ? {
@@ -238,7 +234,6 @@ export default async function SoulPage({ params }: PageProps) {
         stars={transformedData.soul.stats.stars}
         createdAt={soul.createdAt}
         updatedAt={soul.updatedAt}
-        testedWithModels={soul.testedWithModels}
       />
       <BreadcrumbSchema
         items={[

apps/web/app/souls/page.tsx

@@ -40,34 +40,28 @@ interface PageProps {
   searchParams: Promise<{
     q?: string
     category?: string
-    model?: string
     sort?: 'recent' | 'published' | 'popular' | 'trending' | 'hot'
     featured?: string
   }>
 }
 
 export default async function SoulsPage({ searchParams }: PageProps) {
-  // Await searchParams (Next.js 15+ async searchParams)
   const params = await searchParams
 
   const categorySlug = params.category
-  const model = params.model
   const sort = params.sort ?? 'recent'
   const featured = params.featured === 'true'
 
-  // Fetch data on the server in parallel
   const [categoriesData, soulsData] = await Promise.all([
     getCategoriesList(),
     getSoulsList({
       categorySlug,
-      model,
       sort,
       featured: featured || undefined,
-      limit: 50,
+      limit: 24,
     }),
   ])
 
-  // Transform categories
   const categories: Category[] = (categoriesData || []).map((cat: CategoryData) => ({
     id: cat._id,
     slug: cat.slug,
@@ -77,7 +71,6 @@ export default async function SoulsPage({ searchParams }: PageProps) {
     color: cat.color || '#878787',
   }))
 
-  // Transform souls
   const souls: Soul[] = (soulsData?.items || []).map((item: SoulListItem) => ({
     id: item.soul._id,
     slug: item.soul.slug,
@@ -90,7 +83,6 @@ export default async function SoulsPage({ searchParams }: PageProps) {
     stars: item.soul.stats?.stars || 0,
     upvotes: item.soul.stats?.upvotes || 0,
     featured: item.soul.featured || false,
-    tested_with: (item.soul.testedWithModels || []).map((t: { model: string }) => t.model),
     category_id: item.category?._id || '',
     category: item.category
       ? {
@@ -107,6 +99,8 @@ export default async function SoulsPage({ searchParams }: PageProps) {
     updated_at: new Date(item.soul.updatedAt).toISOString(),
   }))
 
+  const initialCursor = soulsData?.nextCursor ?? null
+
   return (
     <>
       <CollectionPageSchema
@@ -116,7 +110,11 @@ export default async function SoulsPage({ searchParams }: PageProps) {
         itemCount={souls.length}
       />
       <BreadcrumbSchema items={[{ name: 'Souls', url: '/souls' }]} />
-      <BrowseContent initialCategories={categories} initialSouls={souls} />
+      <BrowseContent
+        initialCategories={categories}
+        initialSouls={souls}
+        initialCursor={initialCursor}
+      />
     </>
   )
 }

apps/web/components/browse/__tests__/browse-content.test.tsx

@@ -16,7 +16,6 @@ vi.mock('nuqs', () => ({
     {
       q: '',
       category: null,
-      model: null,
       sort: 'recent',
       featured: false,
     },
@@ -59,6 +58,15 @@ vi.mock('@/components/souls/soul-card-grid', () => ({
     React.createElement('div', {}, children),
 }))
 
+vi.mock('@tanstack/react-virtual', () => ({
+  useWindowVirtualizer: () => ({
+    getVirtualItems: () => [{ key: '0', index: 0, start: 0, size: 220, end: 220 }],
+    getTotalSize: () => 220,
+    measureElement: () => {},
+    options: { scrollMargin: 0 },
+  }),
+}))
+
 vi.mock('next/link', () => ({
   default: ({
     children,
@@ -100,17 +108,27 @@ const mockSoul: Soul = {
 
 describe('BrowseContent', () => {
   it('renders Browse heading', () => {
-    render(<BrowseContent initialCategories={[mockCategory]} initialSouls={[]} />)
+    render(
+      <BrowseContent initialCategories={[mockCategory]} initialSouls={[]} initialCursor={null} />
+    )
     expect(screen.getByRole('heading', { name: 'Browse Souls', level: 1 })).toBeInTheDocument()
   })
 
   it('renders empty state when no souls match', () => {
-    render(<BrowseContent initialCategories={[mockCategory]} initialSouls={[]} />)
+    render(
+      <BrowseContent initialCategories={[mockCategory]} initialSouls={[]} initialCursor={null} />
+    )
     expect(screen.getByText('No souls found')).toBeInTheDocument()
   })
 
   it('renders soul cards when souls provided', () => {
-    render(<BrowseContent initialCategories={[mockCategory]} initialSouls={[mockSoul]} />)
+    render(
+      <BrowseContent
+        initialCategories={[mockCategory]}
+        initialSouls={[mockSoul]}
+        initialCursor={null}
+      />
+    )
     expect(screen.getByText('Test Soul')).toBeInTheDocument()
   })
 })