diff --git a/packages/trace-viewer/src/entries.ts b/packages/trace-viewer/src/entries.ts
index bca5751ab2..b032884493 100644
--- a/packages/trace-viewer/src/entries.ts
+++ b/packages/trace-viewer/src/entries.ts
@@ -43,6 +43,7 @@ export type ContextEntry = {
 export type PageEntry = {
   screencastFrames: {
     sha1: string,
+    pageId: string,
     timestamp: number,
     width: number,
     height: number,
diff --git a/packages/trace-viewer/src/ui/modelUtil.ts b/packages/trace-viewer/src/ui/modelUtil.ts
index d7bfe268e9..90a382ddb1 100644
--- a/packages/trace-viewer/src/ui/modelUtil.ts
+++ b/packages/trace-viewer/src/ui/modelUtil.ts
@@ -22,6 +22,7 @@ import type { ContextEntry, PageEntry } from '../entries';
 import type { StackFrame } from '@protocol/channels';
 
 const contextSymbol = Symbol('context');
+const pageSymbol = Symbol('page');
 const nextInContextSymbol = Symbol('next');
 const prevInListSymbol = Symbol('prev');
 const eventsSymbol = Symbol('events');
@@ -148,6 +149,7 @@ function indexModel(context: ContextEntry) {
   for (let i = 0; i < context.actions.length; ++i) {
     const action = context.actions[i] as any;
     action[contextSymbol] = context;
+    action[pageSymbol] = context.pages.find(page => page.screencastFrames.find(frame => frame.pageId === action.pageId));
   }
   let lastNonRouteAction = undefined;
   for (let i = context.actions.length - 1; i >= 0; i--) {
@@ -357,7 +359,7 @@ export function prevInList(action: ActionTraceEvent): ActionTraceEvent {
 }
 
 export function pageForAction(action: ActionTraceEvent): PageEntry {
-  return context(action).pages[0]; // TODO: figure out what to do about multiple pages.
+  return (action as any)[pageSymbol];
 }
 
 export function stats(action: ActionTraceEvent): { errors: number, warnings: number } {