Remix 3 SSR: server-rendered, hydrated SPA for all HTML pages

e2e/admin-rbac.spec.ts

@@ -59,6 +59,25 @@ test('admin RBAC controls access, role assignment, and privacy boundaries', asyn
 	await expect(
 		page.getByRole('link', { name: 'Admin', exact: true }),
 	).toBeVisible()
+
+	await page.evaluate(() => {
+		;(window as Window & { __e2eMarker?: boolean }).__e2eMarker = true
+	})
+	await page.getByRole('link', { name: 'Admin', exact: true }).click()
+	await expect(page).toHaveURL(/\/admin\/users\/?$/)
+	await expect(page.getByRole('heading', { name: 'Admin users' })).toBeVisible()
+	// The first user is auto-selected, so the email can render in both the
+	// list and the detail panel — assert on the list entry specifically.
+	await expect(
+		page.getByRole('button', { name: adminUser.username }),
+	).toBeVisible()
+	await expect(page.getByText('Unable to load admin users.')).toHaveCount(0)
+	expect(
+		await page.evaluate(
+			() => (window as Window & { __e2eMarker?: boolean }).__e2eMarker,
+		),
+	).toBe(true)
+
 	await page.goto('/admin/users?pageSize=100')
 	await expect(page.getByRole('heading', { name: 'Admin users' })).toBeVisible()
 	await expect(page.getByText(memberUser.email)).toBeVisible()

e2e/d1-utils.ts

@@ -1,6 +1,7 @@
 import { spawnSync } from 'node:child_process'
 import path from 'node:path'
 import { createPasswordHash } from '@kody-internal/shared/password-hash.ts'
+import { createStableUserIdFromEmail } from '../packages/worker/src/user-id.ts'
 
 const projectRoot = path.resolve(import.meta.dirname, '..')
 
@@ -82,3 +83,54 @@ FROM users u, roles r
 WHERE u.email = ${quoteSql(email)} AND r.name = ${quoteSql(role)};`.trim()
 	executeE2eD1Command(sql)
 }
+
+export async function seedCommunityListingInE2eDatabase(input: {
+	listingId: string
+	ownerEmail: string
+	name: string
+	description: string
+	tags?: Array<string>
+	kodyId?: string
+	packageId?: string
+	sourceId?: string
+}) {
+	const ownerUserId = await createStableUserIdFromEmail(input.ownerEmail)
+	const tagsJson = JSON.stringify(input.tags ?? [])
+	const kodyId = input.kodyId ?? input.listingId
+	const packageId = input.packageId ?? `pkg-${input.listingId}`
+	const sourceId = input.sourceId ?? `src-${input.listingId}`
+	const sql = `
+INSERT INTO community_listings (
+	id,
+	owner_user_id,
+	package_id,
+	source_id,
+	kody_id,
+	name,
+	description,
+	tags_json,
+	license,
+	pinned_commit,
+	status
+) VALUES (
+	${quoteSql(input.listingId)},
+	${quoteSql(ownerUserId)},
+	${quoteSql(packageId)},
+	${quoteSql(sourceId)},
+	${quoteSql(kodyId)},
+	${quoteSql(input.name)},
+	${quoteSql(input.description)},
+	${quoteSql(tagsJson)},
+	'MIT',
+	'abc1234567890abcdef1234567890abcdef12345678',
+	'active'
+)
+ON CONFLICT(id) DO UPDATE SET
+	owner_user_id = excluded.owner_user_id,
+	name = excluded.name,
+	description = excluded.description,
+	tags_json = excluded.tags_json,
+	status = excluded.status,
+	updated_at = CURRENT_TIMESTAMP;`.trim()
+	executeE2eD1Command(sql)
+}

e2e/smoke.spec.ts

@@ -27,6 +27,15 @@ test('smoke test covers shell, auth redirect, and login', async ({ page }) => {
 		page.getByRole('link', { name: 'Secrets', exact: true }),
 	).toBeVisible()
 
+	// SPA-navigate to secrets: the client refetch must hit the same origin
+	// (regression: absolute placeholder-origin URLs caused "Failed to fetch").
+	await page.getByRole('link', { name: 'Secrets', exact: true }).click()
+	await expect(page).toHaveURL(/\/account\/secrets$/)
+	await expect(
+		page.getByRole('heading', { name: 'Saved secrets', exact: true }),
+	).toBeVisible()
+	await expect(page.getByText('Failed to fetch')).not.toBeVisible()
+
 	await page.context().clearCookies()
 	await page.goto('/privacy')
 	await expect(page.getByRole('heading', { name: 'Privacy' })).toBeVisible()

e2e/ssr-hydration.spec.ts

@@ -0,0 +1,108 @@
+import { expect, test } from '@playwright/test'
+import { ensurePrimaryUserExists, primaryTestUser } from './auth-test-user.ts'
+import { seedCommunityListingInE2eDatabase } from './d1-utils.ts'
+
+const alphaListing = {
+	listingId: 'e2e-ssr-listing-alpha',
+	name: '@kody/alpha-ssr-package',
+	description: 'Alpha SSR fixture package for hydration tests.',
+	tags: ['alpha', 'ssr'],
+}
+
+const betaListing = {
+	listingId: 'e2e-ssr-listing-beta',
+	name: '@kody/beta-ssr-package',
+	description: 'Beta SSR fixture package for hydration tests.',
+	tags: ['beta', 'ssr'],
+}
+
+test('SSR community HTML hydrates SPA navigation and client search', async ({
+	page,
+	request,
+}) => {
+	await ensurePrimaryUserExists(request)
+	await seedCommunityListingInE2eDatabase({
+		...alphaListing,
+		ownerEmail: primaryTestUser.email,
+	})
+	await seedCommunityListingInE2eDatabase({
+		...betaListing,
+		ownerEmail: primaryTestUser.email,
+	})
+
+	const htmlResponse = await request.get('/community')
+	expect(htmlResponse.ok()).toBe(true)
+	const rawHtml = await htmlResponse.text()
+	expect(rawHtml).toContain(alphaListing.description)
+	expect(rawHtml).toContain(betaListing.name)
+	expect(rawHtml).not.toContain('Loading community packages')
+	expect(rawHtml).toContain('id="rmx-data"')
+	expect(rawHtml).toContain('"community"')
+
+	const filteredHtmlResponse = await request.get('/community?q=beta')
+	expect(filteredHtmlResponse.ok()).toBe(true)
+	const filteredHtml = await filteredHtmlResponse.text()
+	expect(filteredHtml).toContain(betaListing.description)
+	expect(filteredHtml).not.toContain(alphaListing.name)
+
+	await page.goto('/community')
+	await expect(page.getByText(alphaListing.description)).toBeVisible()
+	await expect(page.getByText(betaListing.description)).toBeVisible()
+
+	await page.evaluate(() => {
+		;(window as Window & { __e2eMarker?: boolean }).__e2eMarker = true
+	})
+
+	await page.getByRole('link', { name: alphaListing.name }).click()
+	await expect(page).toHaveURL(
+		new RegExp(`/community/${alphaListing.listingId}$`),
+	)
+	await expect(page.getByText(alphaListing.description)).toBeVisible()
+	expect(
+		await page.evaluate(
+			() => (window as Window & { __e2eMarker?: boolean }).__e2eMarker,
+		),
+	).toBe(true)
+
+	await page.getByRole('link', { name: 'Community', exact: true }).click()
+	await expect(page).toHaveURL(/\/community$/)
+	expect(
+		await page.evaluate(
+			() => (window as Window & { __e2eMarker?: boolean }).__e2eMarker,
+		),
+	).toBe(true)
+
+	await page
+		.getByPlaceholder('Search by name, description, or tags')
+		.fill('beta')
+	await page.getByRole('button', { name: 'Search' }).click()
+	await expect(page).toHaveURL(/\/community\?q=beta/)
+	await expect(page.getByText(betaListing.description)).toBeVisible()
+	await expect(page.getByRole('link', { name: alphaListing.name })).toHaveCount(
+		0,
+	)
+	expect(
+		await page.evaluate(
+			() => (window as Window & { __e2eMarker?: boolean }).__e2eMarker,
+		),
+	).toBe(true)
+
+	await page.goto('/community?q=beta')
+	await expect(
+		page.getByPlaceholder('Search by name, description, or tags'),
+	).toHaveValue('beta')
+	await expect(page.getByText(betaListing.description)).toBeVisible()
+	await expect(page.getByRole('link', { name: alphaListing.name })).toHaveCount(
+		0,
+	)
+
+	// A server-rendered 404 must not pin later SPA navigations to the
+	// not-found fallback.
+	const notFoundResponse = await page.goto('/definitely-not-a-page')
+	expect(notFoundResponse?.status()).toBe(404)
+	await expect(page.getByRole('heading', { name: 'Not Found' })).toBeVisible()
+	await page.getByRole('link', { name: 'Community', exact: true }).click()
+	await expect(page).toHaveURL(/\/community$/)
+	await expect(page.getByText(betaListing.description)).toBeVisible()
+	await expect(page.getByRole('heading', { name: 'Not Found' })).toHaveCount(0)
+})

packages/worker/client/app-root.tsx

@@ -0,0 +1,29 @@
+import { clientEntry, type EntryComponent, type Handle } from 'remix/ui'
+import { App } from './app.tsx'
+import { RouterLocationProvider } from './router-location.tsx'
+import { type SessionInfo } from './session.ts'
+import { type AppLoaderData } from '#client/loader-data-types.ts'
+
+export const APP_ROOT_ENTRY_ID = '/client-entry.js#AppRoot'
+
+export type AppRootProps = {
+	url: string
+	session: SessionInfo | null
+	loaderData?: AppLoaderData
+	notFound?: boolean
+}
+
+export const AppRoot: EntryComponent<AppRootProps> = clientEntry(
+	APP_ROOT_ENTRY_ID,
+	function AppRoot(handle: Handle<AppRootProps>) {
+		return () => (
+			<RouterLocationProvider url={handle.props.url}>
+				<App
+					embeddedSession={handle.props.session}
+					loaderData={handle.props.loaderData}
+					notFound={handle.props.notFound === true}
+				/>
+			</RouterLocationProvider>
+		)
+	},
+)