Fix Storybook flakes caused by Math.random() (#892)

Now we use seedrandom so it doesn't change!

Co-authored-by: Chris Hasson <[email protected]>

Author: hassoncs

pnpm-lock.yaml

@@ -32,6 +32,7 @@
 		"@roo-code/types": "workspace:^",
 		"@tailwindcss/vite": "^4.0.0",
 		"@tanstack/react-query": "^5.68.0",
+		"@types/seedrandom": "^3.0.8",
 		"@vscode/codicons": "^0.0.36",
 		"@vscode/webview-ui-toolkit": "^1.4.0",
 		"axios": "^1.7.4",
@@ -66,6 +67,7 @@
 		"remark-gfm": "^4.0.1",
 		"remark-math": "^6.0.0",
 		"remove-markdown": "^0.6.0",
+		"seedrandom": "^3.0.5",
 		"shell-quote": "^1.8.2",
 		"shiki": "^3.2.1",
 		"source-map": "^0.7.4",
@@ -103,9 +105,9 @@
 		"jest": "^29.7.0",
 		"jest-environment-jsdom": "^29.7.0",
 		"jest-simple-dot-reporter": "^1.0.5",
+		"jsdom": "^26.0.0",
 		"storybook": "^8.4.7",
 		"ts-jest": "^29.2.5",
-		"jsdom": "^26.0.0",
 		"typescript": "5.8.3",
 		"vite": "6.3.5",
 		"vitest": "^3.2.3"

webview-ui/package.json

@@ -1,7 +1,9 @@
 import type { ClineMessage } from "@roo-code/types"
+import seedrandom from "seedrandom"
 
 // Fixed base timestamp for consistent snapshots (January 1, 2024, 12:00:00 UTC)
 const BASE_TIMESTAMP = 1704110400000
+const rng = seedrandom("TimelineData")
 
 export function generateSampleTimelineData(): ClineMessage[] {
 	const messages: ClineMessage[] = []
@@ -47,9 +49,9 @@ export function generateSampleTimelineData(): ClineMessage[] {
 
 	for (let cycle = 0; cycle < 8; cycle++) {
 		messageTemplates.forEach((template, i) => {
-			const randomText = template.texts[Math.floor(Math.random() * template.texts.length)]
+			const randomText = template.texts[Math.floor(rng() * template.texts.length)]
 			messages.push({
-				ts: BASE_TIMESTAMP + (cycle * 8 + i) * (1000 + Math.random() * 3000),
+				ts: BASE_TIMESTAMP + (cycle * 8 + i) * (1000 + rng() * 3000),
 				type: template.type as "ask" | "say",
 				...(template.ask && { ask: template.ask as any }),
 				...(template.say && { say: template.say as any }),