ts: /runs/{runId}/{programId}/{index}

Author: dsocolobsky

website/frontend/src/components/RunSummary.tsx

@@ -71,9 +71,10 @@ export function RunSummaryCard({
 }) {
 	return (
 		<ShadowCard
-			to="/runs/$run/$index"
+			to="/runs/$run/$programId/$index"
 			params={{
 				run: id,
+				programId: programId,
 				index: index,
 			}}
 		>

website/frontend/src/fetchRuns.ts

@@ -68,7 +68,8 @@ function makeDecodeState(): DecodeState {
 
 export async function fetchRunStreaming(
 	runId: string,
-	indexStr: string
+	indexStr: string,
+	programId?: string
 ): Promise<ReadableStream<ApiGetRun>> {
 	if (import.meta.env.VITE_FAKE_DATA) {
 		const seed = Math.random() * 1_000_000_000

website/frontend/src/routes/runs/$run.$index.tsx renamed to website/frontend/src/routes/runs/$run.$programId.$index.tsx

@@ -23,14 +23,15 @@ import { RunBox } from '../../components/RunBox.js'
 import { FullPagePortal } from '../../components/FullPagePortal.js'
 import { ApiGetRun } from 'shared'
 import AnimatedTokensCounter from '../../components/AnimatedTokensCounter.js'
-export const Route = createFileRoute('/runs/$run/$index')({
-	loader: async ({ params }) => fetchRunStreaming(params.run, params.index),
+export const Route = createFileRoute('/runs/$run/$programId/$index')({
+	loader: async ({ params }) =>
+		fetchRunStreaming(params.run, params.index, params.programId),
 	component: RouteComponent,
 })
 
 function RouteComponent() {
 	const runData = useStreamingLoaderData<ApiGetRun>({
-		from: '/runs/$run/$index',
+		from: '/runs/$run/$programId/$index',
 	})
 	const run = runData?.run
 	const isOnlyRun = runData?.isOnlyRun

website/frontend/src/routes/runs/index.tsx

@@ -7,9 +7,10 @@ export const Route = createFileRoute('/runs/')({
 		fetchRuns().then((runs) => {
 			if (runs.runs.length === 1) {
 				throw redirect({
-					to: '/runs/$run/$index',
+					to: '/runs/$run/$programId/$index',
 					params: {
 						run: runs.runs[0].id,
+						programId: runs.runs[0].programId,
 						index: `${runs.runs[0].index}`,
 					},
 				})