Experiment 2.0

apps/web-foldkit/index.html

@@ -0,0 +1,15 @@
+<!doctype html>
+<html lang="en">
+	<head>
+		<meta charset="UTF-8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+		<link rel="icon" href="/icon.svg" />
+		<meta name="theme-color" content="#000000" />
+		<meta name="description" content="Slack alternative for modern teams." />
+		<title>Hazel Chat</title>
+	</head>
+	<body class="bg-bg text-fg">
+		<div id="app"></div>
+		<script type="module" src="/src/entry.ts"></script>
+	</body>
+</html>

apps/web-foldkit/package.json

@@ -0,0 +1,44 @@
+{
+	"name": "web-foldkit",
+	"private": true,
+	"type": "module",
+	"scripts": {
+		"build": "vite build",
+		"typecheck": "tsc --noEmit",
+		"test": "vitest run"
+	},
+	"dependencies": {
+		"@effect/platform-browser": "catalog:effect",
+		"@electric-sql/client": "1.5.28",
+		"@foldkit/ui": "0.167.0",
+		"@fontsource/inter": "^5.2.8",
+		"@hazel/domain": "workspace:*",
+		"@hazel/schema": "workspace:*",
+		"@tanstack/db": "0.11.3",
+		"effect": "catalog:effect",
+		"embla-carousel": "8.6.0",
+		"foldkit": "0.167.0",
+		"marked": "^17.0.4",
+		"prosemirror-commands": "^1.7.2",
+		"prosemirror-history": "^1.5.1",
+		"prosemirror-keymap": "^1.2.3",
+		"prosemirror-model": "^1.25.12",
+		"prosemirror-state": "^1.4.4",
+		"prosemirror-transform": "^1.12.2",
+		"prosemirror-view": "^1.42.6",
+		"remend": "^1.2.2",
+		"tailwind-merge": "^3.5.0",
+		"tailwind-variants": "^3.2.2"
+	},
+	"devDependencies": {
+		"@foldkit/devtools": "0.167.0",
+		"@foldkit/vite-plugin": "0.27.0",
+		"@tailwindcss/vite": "^4.2.1",
+		"tailwindcss": "^4.2.1",
+		"tailwindcss-react-aria-components": "^2.0.1",
+		"tw-animate-css": "^1.4.0",
+		"typescript": "^5.9.3",
+		"vite": "8.0.0",
+		"vitest": "^4.0.0"
+	}
+}

apps/web-foldkit/scripts/bench-s2-data.ts

@@ -0,0 +1,67 @@
+import { resolve } from "node:path"
+import { heapStats } from "bun:jsc"
+import { plugin } from "bun"
+
+/**
+ * S2 benchmark: (a) the TanStack DB bridge (`page/chat/data.ts` streams over the legacy query
+ * builders) vs (b) a normalized store in the Model (`data/normalized-store.ts`), on the heavy
+ * dataset's 10k-message channel. Measures update latency for a new message and a reaction toggle,
+ * the initial build, heap, and the dev-mode deep-freeze cost. Run from apps/web-foldkit:
+ *
+ *   bun run scripts/bench-s2-data.ts [--limits 30,300,3000,10000] [--samples 15]
+ */
+
+// `~/db/collections` would open Electric shapes; the benchmark swaps in local collections.
+const BENCH_COLLECTIONS = resolve(import.meta.dir, "bench-s2/collections.ts")
+plugin({
+	name: "bench-local-collections",
+	setup(build) {
+		build.onLoad({ filter: /apps\/web\/src\/db\/collections\.ts$/ }, () => ({
+			contents: `export * from ${JSON.stringify(BENCH_COLLECTIONS)}`,
+			loader: "ts",
+		}))
+	},
+})
+
+const args = new Map(
+	Bun.argv
+		.slice(2)
+		.flatMap((arg, index, all) => (arg.startsWith("--") ? [[arg.slice(2), all[index + 1] ?? ""]] : [])),
+)
+const limits = (args.get("limits") ?? "30,300,3000,10000").split(",").map(Number)
+const samples = Number(args.get("samples") ?? "15")
+
+const only = args.get("only")
+const heapMb = () => {
+	Bun.gc(true)
+	return heapStats().heapSize / 1e6
+}
+
+// `--heap a|b`: heap held by one open channel, in a fresh process per option.
+const heapOption = args.get("heap")
+if (heapOption) {
+	await import("../../../packages/ui-parity/src/fixtures/datasets/heavy.ts")
+	const baseline = heapMb()
+	const { setupForHeap } = await import(
+		heapOption === "a" ? "./bench-s2/option-a.ts" : "./bench-s2/option-b.ts"
+	)
+	const retained = await setupForHeap(30)
+	console.log(JSON.stringify({ option: heapOption, heapMb: Math.round((heapMb() - baseline) * 10) / 10 }))
+	void retained
+	process.exit(0)
+}
+
+const results: Array<Record<string, unknown>> = []
+if (only !== "b") {
+	const { runA } = await import("./bench-s2/option-a.ts")
+	for (const limit of limits)
+		results.push({ option: "a: TanStack DB bridge", limit, ...(await runA(limit, samples)) })
+}
+if (only !== "a") {
+	const { runB } = await import("./bench-s2/option-b.ts")
+	for (const limit of limits)
+		results.push({ option: "b: normalized store", limit, ...(await runB(limit, samples)) })
+}
+console.table(results)
+console.log(JSON.stringify(results))
+process.exit(0)

apps/web-foldkit/scripts/bench-s2/collections.ts

@@ -0,0 +1,29 @@
+import { BTreeIndex, createCollection, localOnlyCollectionOptions } from "@tanstack/db"
+import { heavyDataset } from "../../../../packages/ui-parity/src/fixtures/datasets/heavy.ts"
+
+/**
+ * Stand-in for `~/db/collections` in the S2 benchmark: the same collection names, seeded with the
+ * heavy dataset through the sync path (as Electric would), with no network.
+ */
+
+type Row = Record<string, unknown> & { readonly id: string }
+
+const local = (id: string, rows: ReadonlyArray<Record<string, unknown>> | undefined) =>
+	createCollection(
+		localOnlyCollectionOptions<Row, string>({
+			id,
+			// Same indexing as `libs/effect-electric-db-collection` (collection.ts).
+			autoIndex: "eager",
+			defaultIndexType: BTreeIndex,
+			getKey: (row) => row.id,
+			initialData: (rows ?? []).map((row) => ({ ...row, id: String(row.id) })),
+		}),
+	)
+
+const tables = heavyDataset.tables
+
+export const messageCollection = local("messages", tables.messages)
+export const pinnedMessageCollection = local("pinned_messages", tables.pinned_messages)
+export const userCollection = local("users", tables.users)
+export const messageReactionCollection = local("message_reactions", tables.message_reactions)
+export const channelCollection = local("channels", tables.channels)

apps/web-foldkit/scripts/bench-s2/option-a.ts

@@ -0,0 +1,127 @@
+import { messageCollection, messageReactionCollection } from "~/db/collections"
+import * as Data from "../../src/page/chat/data.ts"
+import * as Page from "../../src/page/chat/page.ts"
+import {
+	channelId,
+	currentUserId,
+	deepFreeze,
+	freshId,
+	median,
+	newMessageRow,
+	round,
+	subscribe,
+	time,
+} from "./shared.ts"
+
+/**
+ * Option (a): the live TanStack DB queries emit the full result on every change; the page re-derives
+ * its rows. `dataMs` covers the collection write through the emitted, validated Message.
+ */
+
+export const runA = async (limit: number, samples: number) => {
+	let constructMs = 0
+	const messages = subscribe(
+		Data.messagesStream(channelId, limit, (rows) => {
+			const [message, ms] = time(() => Page.Message.UpdatedMessages({ messages: rows }))
+			constructMs = ms
+			return message
+		}),
+	)
+	const reactions = subscribe(
+		Data.reactionsStream(channelId, (rows) => Page.Message.UpdatedReactions({ reactions: rows })),
+	)
+
+	const started = performance.now()
+	const firstMessages = await messages.next()
+	const initialDataMs = performance.now() - started
+	const initialConstructMs = constructMs
+	const firstReactions = await reactions.next()
+	let [page, initialUpdateMs] = time(() => {
+		const withMessages = Page.update(Page.init(channelId, currentUserId), firstMessages).model
+		return Page.update(withMessages, firstReactions).model
+	})
+	const [, initialFreezeMs] = time(() => deepFreeze(page))
+
+	const message = {
+		data: [] as number[],
+		construct: [] as number[],
+		update: [] as number[],
+		freeze: [] as number[],
+	}
+	for (let index = 0; index < samples; index++) {
+		const begin = performance.now()
+		messageCollection.insert(newMessageRow(index))
+		const emitted = await messages.next()
+		message.data.push(performance.now() - begin)
+		message.construct.push(constructMs)
+		const [next, updateMs] = time(() => Page.update(page, emitted).model)
+		message.update.push(updateMs)
+		message.freeze.push(time(() => deepFreeze(next))[1])
+		page = next
+	}
+
+	const reaction = { data: [] as number[], update: [] as number[], freeze: [] as number[] }
+	const target = page.messages[0]!
+	for (let index = 0; index < samples; index++) {
+		const id = freshId()
+		for (const write of [
+			() =>
+				messageReactionCollection.insert({
+					id,
+					messageId: target.id,
+					channelId,
+					conversationId: null,
+					userId: currentUserId,
+					emoji: "🚀",
+					createdAt: new Date(),
+				}),
+			() => messageReactionCollection.delete(id),
+		]) {
+			const begin = performance.now()
+			write()
+			const emitted = await reactions.next()
+			reaction.data.push(performance.now() - begin)
+			const [next, updateMs] = time(() => Page.update(page, emitted).model)
+			reaction.update.push(updateMs)
+			reaction.freeze.push(time(() => deepFreeze(next))[1])
+			page = next
+		}
+	}
+	await messages.stop()
+	await reactions.stop()
+
+	return {
+		initialMs: round(initialDataMs + initialUpdateMs),
+		"initial data/construct/update/freeze": [
+			initialDataMs,
+			initialConstructMs,
+			initialUpdateMs,
+			initialFreezeMs,
+		]
+			.map(round)
+			.join(" / "),
+		newMessageMs: round(median(message.data) + median(message.update)),
+		"msg data/construct/update/freeze": [message.data, message.construct, message.update, message.freeze]
+			.map(median)
+			.join(" / "),
+		reactionToggleMs: round(median(reaction.data) + median(reaction.update)),
+		"reaction data/update/freeze": [reaction.data, reaction.update, reaction.freeze]
+			.map(median)
+			.join(" / "),
+	}
+}
+
+/** Everything option (a) keeps alive for one open channel: seeded collections, live queries, the page. */
+export const setupForHeap = async (limit: number) => {
+	const messages = subscribe(
+		Data.messagesStream(channelId, limit, (rows) => Page.Message.UpdatedMessages({ messages: rows })),
+	)
+	const reactions = subscribe(
+		Data.reactionsStream(channelId, (rows) => Page.Message.UpdatedReactions({ reactions: rows })),
+	)
+	const page = Page.update(
+		Page.update(Page.init(channelId, currentUserId), await messages.next()).model,
+		await reactions.next(),
+	).model
+	return { messages, reactions, page, collections: [messageCollection, messageReactionCollection] }
+}