From b4fdd341bfd3b109fa39482ee89db50c7909297a Mon Sep 17 00:00:00 2001
From: Sebastian Markbage <sebastian@calyptus.eu>
Date: Fri, 26 Sep 2025 18:23:49 -0400
Subject: [PATCH 1/7] Add play/pause/skip buttons

---
 .../src/devtools/views/ButtonIcon.js          | 40 +++++++++++++++++++
 .../views/SuspenseTab/SuspenseTimeline.js     | 23 +++++++++--
 2 files changed, 60 insertions(+), 3 deletions(-)

diff --git a/packages/react-devtools-shared/src/devtools/views/ButtonIcon.js b/packages/react-devtools-shared/src/devtools/views/ButtonIcon.js
index b4decabcba27a..a3f7b0701ef17 100644
--- a/packages/react-devtools-shared/src/devtools/views/ButtonIcon.js
+++ b/packages/react-devtools-shared/src/devtools/views/ButtonIcon.js
@@ -42,6 +42,10 @@ export type IconType =
   | 'panel-bottom-close'
   | 'filter-on'
   | 'filter-off'
+  | 'play'
+  | 'pause'
+  | 'skip-previous'
+  | 'skip-next'
   | 'error'
   | 'suspend'
   | 'undo'
@@ -163,6 +167,22 @@ export default function ButtonIcon({className = '', type}: Props): React.Node {
       pathData = PATH_MATERIAL_FILTER_ALT_OFF;
       viewBox = panelIcons;
       break;
+    case 'play':
+      pathData = PATH_MATERIAL_PLAY_ARROW;
+      viewBox = panelIcons;
+      break;
+    case 'pause':
+      pathData = PATH_MATERIAL_PAUSE;
+      viewBox = panelIcons;
+      break;
+    case 'skip-previous':
+      pathData = PATH_MATERIAL_SKIP_PREVIOUS_ARROW;
+      viewBox = panelIcons;
+      break;
+    case 'skip-next':
+      pathData = PATH_MATERIAL_SKIP_NEXT_ARROW;
+      viewBox = panelIcons;
+      break;
     case 'suspend':
       pathData = PATH_SUSPEND;
       break;
@@ -358,3 +378,23 @@ const PATH_MATERIAL_FILTER_ALT = `
 const PATH_MATERIAL_FILTER_ALT_OFF = `
   m592-481-57-57 143-182H353l-80-80h487q25 0 36 22t-4 42L592-481ZM791-56 560-287v87q0 17-11.5 28.5T520-160h-80q-17 0-28.5-11.5T400-200v-247L56-791l56-57 736 736-57 56ZM535-538Z
 `;
+
+// Source: Material Design Icons play_arrow
+const PATH_MATERIAL_PLAY_ARROW = `
+  M320-200v-560l440 280-440 280Zm80-280Zm0 134 210-134-210-134v268Z
+`;
+
+// Source: Material Design Icons pause
+const PATH_MATERIAL_PAUSE = `
+  M520-200v-560h240v560H520Zm-320 0v-560h240v560H200Zm400-80h80v-400h-80v400Zm-320 0h80v-400h-80v400Zm0-400v400-400Zm320 0v400-400Z
+`;
+
+// Source: Material Design Icons skip_previous
+const PATH_MATERIAL_SKIP_PREVIOUS_ARROW = `
+  M220-240v-480h80v480h-80Zm520 0L380-480l360-240v480Zm-80-240Zm0 90v-180l-136 90 136 90Z
+`;
+
+// Source: Material Design Icons skip_next
+const PATH_MATERIAL_SKIP_NEXT_ARROW = `
+  M660-240v-480h80v480h-80Zm-440 0v-480l360 240-360 240Zm80-240Zm0 90 136-90-136-90v180Z
+`;
diff --git a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTimeline.js b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTimeline.js
index 51b2b9e9a065a..99776c212efb0 100644
--- a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTimeline.js
+++ b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTimeline.js
@@ -8,7 +8,7 @@
  */
 
 import * as React from 'react';
-import {useContext, useLayoutEffect, useRef} from 'react';
+import {useContext, useState, useLayoutEffect, useRef} from 'react';
 import {BridgeContext, StoreContext} from '../context';
 import {TreeDispatcherContext} from '../Components/TreeContext';
 import {useHighlightHostInstance} from '../hooks';
@@ -21,6 +21,8 @@ import typeof {
   SyntheticEvent,
   SyntheticPointerEvent,
 } from 'react-dom-bindings/src/events/SyntheticEvent';
+import Button from '../Button';
+import ButtonIcon, {type IconType} from '../ButtonIcon';
 
 function SuspenseTimelineInput() {
   const bridge = useContext(BridgeContext);
@@ -153,10 +155,25 @@ function SuspenseTimelineInput() {
     highlightHostInstance(suspenseID);
   }
 
+  const [playing, setPlaying] = useState(false);
+
   return (
     <>
-      {timelineIndex}/{max}
-      <div className={styles.SuspenseTimelineInput}>
+      <Button disabled={timelineIndex === 0} title={'Previous'}>
+        <ButtonIcon type={'skip-previous'} />
+      </Button>
+      <Button
+        onClick={() => setPlaying(playing => !playing)}
+        disabled={max === 0 && !playing}
+        title={playing ? 'Pause' : 'Play'}>
+        <ButtonIcon type={playing ? 'pause' : 'play'} />
+      </Button>
+      <Button disabled={timelineIndex === max} title={'Next'}>
+        <ButtonIcon type={'skip-next'} />
+      </Button>
+      <div
+        className={styles.SuspenseTimelineInput}
+        title={timelineIndex + '/' + max}>
         <input
           className={styles.SuspenseTimelineSlider}
           type="range"

From 60e3dcc77d57b21b11de86fc95895661f50122ae Mon Sep 17 00:00:00 2001
From: Sebastian Markbage <sebastian@calyptus.eu>
Date: Fri, 26 Sep 2025 18:44:44 -0400
Subject: [PATCH 2/7] Skip forward/backward

Allow rapid clicks
---
 .../views/SuspenseTab/SuspenseTimeline.js     | 40 +++++++++++++++++--
 .../views/SuspenseTab/SuspenseTreeContext.js  | 28 ++++++++++++-
 2 files changed, 63 insertions(+), 5 deletions(-)

diff --git a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTimeline.js b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTimeline.js
index 99776c212efb0..4050158f47e8c 100644
--- a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTimeline.js
+++ b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTimeline.js
@@ -22,7 +22,7 @@ import typeof {
   SyntheticPointerEvent,
 } from 'react-dom-bindings/src/events/SyntheticEvent';
 import Button from '../Button';
-import ButtonIcon, {type IconType} from '../ButtonIcon';
+import ButtonIcon from '../ButtonIcon';
 
 function SuspenseTimelineInput() {
   const bridge = useContext(BridgeContext);
@@ -155,20 +155,52 @@ function SuspenseTimelineInput() {
     highlightHostInstance(suspenseID);
   }
 
+  function skipPrevious() {
+    const nextSelectedSuspenseID = timeline[timelineIndex - 1];
+    highlightHostInstance(nextSelectedSuspenseID);
+    treeDispatch({
+      type: 'SELECT_ELEMENT_BY_ID',
+      payload: nextSelectedSuspenseID,
+    });
+    suspenseTreeDispatch({
+      type: 'SUSPENSE_SKIP_TIMELINE_INDEX',
+      payload: false,
+    });
+  }
+
+  function skipForward() {
+    const nextSelectedSuspenseID = timeline[timelineIndex + 1];
+    highlightHostInstance(nextSelectedSuspenseID);
+    treeDispatch({
+      type: 'SELECT_ELEMENT_BY_ID',
+      payload: nextSelectedSuspenseID,
+    });
+    suspenseTreeDispatch({
+      type: 'SUSPENSE_SKIP_TIMELINE_INDEX',
+      payload: true,
+    });
+  }
+
   const [playing, setPlaying] = useState(false);
 
   return (
     <>
-      <Button disabled={timelineIndex === 0} title={'Previous'}>
+      <Button
+        disabled={timelineIndex === 0}
+        title={'Previous'}
+        onClick={skipPrevious}>
         <ButtonIcon type={'skip-previous'} />
       </Button>
       <Button
-        onClick={() => setPlaying(playing => !playing)}
+        onClick={() => setPlaying(p => !p)}
         disabled={max === 0 && !playing}
         title={playing ? 'Pause' : 'Play'}>
         <ButtonIcon type={playing ? 'pause' : 'play'} />
       </Button>
-      <Button disabled={timelineIndex === max} title={'Next'}>
+      <Button
+        disabled={timelineIndex === max}
+        title={'Next'}
+        onClick={skipForward}>
         <ButtonIcon type={'skip-next'} />
       </Button>
       <div
diff --git a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTreeContext.js b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTreeContext.js
index 3f0c5fd41ae2b..d93730b388b37 100644
--- a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTreeContext.js
+++ b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTreeContext.js
@@ -60,12 +60,17 @@ type ACTION_SUSPENSE_SET_TIMELINE_INDEX = {
   type: 'SUSPENSE_SET_TIMELINE_INDEX',
   payload: number,
 };
+type ACTION_SUSPENSE_SKIP_TIMELINE_INDEX = {
+  type: 'SUSPENSE_SKIP_TIMELINE_INDEX',
+  payload: boolean,
+};
 export type SuspenseTreeAction =
   | ACTION_SUSPENSE_TREE_MUTATION
   | ACTION_SET_SUSPENSE_LINEAGE
   | ACTION_SELECT_SUSPENSE_BY_ID
   | ACTION_SET_SUSPENSE_TIMELINE
-  | ACTION_SUSPENSE_SET_TIMELINE_INDEX;
+  | ACTION_SUSPENSE_SET_TIMELINE_INDEX
+  | ACTION_SUSPENSE_SKIP_TIMELINE_INDEX;
 export type SuspenseTreeDispatch = (action: SuspenseTreeAction) => void;
 
 const SuspenseTreeStateContext: ReactContext<SuspenseTreeState> =
@@ -304,6 +309,27 @@ function SuspenseTreeContextController({children}: Props): React.Node {
               timelineIndex: nextTimelineIndex,
             };
           }
+          case 'SUSPENSE_SKIP_TIMELINE_INDEX': {
+            const direction = action.payload;
+            const nextTimelineIndex =
+              state.timelineIndex + (direction ? 1 : -1);
+            if (
+              nextTimelineIndex < 0 ||
+              nextTimelineIndex > state.timeline.length - 1
+            ) {
+              return state;
+            }
+            const nextSelectedSuspenseID = state.timeline[nextTimelineIndex];
+            const nextLineage = store.getSuspenseLineage(
+              nextSelectedSuspenseID,
+            );
+            return {
+              ...state,
+              lineage: nextLineage,
+              selectedSuspenseID: nextSelectedSuspenseID,
+              timelineIndex: nextTimelineIndex,
+            };
+          }
           default:
             throw new Error(`Unrecognized action "${action.type}"`);
         }

From 13ad47ed6b284347f158d4f06cabb1db7c2c0680 Mon Sep 17 00:00:00 2001
From: Sebastian Markbage <sebastian@calyptus.eu>
Date: Fri, 26 Sep 2025 19:01:01 -0400
Subject: [PATCH 3/7] Implement playing state

Pause it as soon as something is selected.

If we restart at the end then loop around to the beginning.
---
 .../views/SuspenseTab/SuspenseTimeline.js     | 14 +++++--
 .../views/SuspenseTab/SuspenseTreeContext.js  | 41 ++++++++++++++++++-
 2 files changed, 50 insertions(+), 5 deletions(-)

diff --git a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTimeline.js b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTimeline.js
index 4050158f47e8c..f7fc031bfd836 100644
--- a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTimeline.js
+++ b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTimeline.js
@@ -8,7 +8,7 @@
  */
 
 import * as React from 'react';
-import {useContext, useState, useLayoutEffect, useRef} from 'react';
+import {useContext, useLayoutEffect, useRef} from 'react';
 import {BridgeContext, StoreContext} from '../context';
 import {TreeDispatcherContext} from '../Components/TreeContext';
 import {useHighlightHostInstance} from '../hooks';
@@ -36,6 +36,7 @@ function SuspenseTimelineInput() {
     selectedRootID: rootID,
     timeline,
     timelineIndex,
+    playing,
   } = useContext(SuspenseTreeStateContext);
 
   const inputRef = useRef<HTMLElement | null>(null);
@@ -181,7 +182,12 @@ function SuspenseTimelineInput() {
     });
   }
 
-  const [playing, setPlaying] = useState(false);
+  function togglePlaying() {
+    suspenseTreeDispatch({
+      type: 'SUSPENSE_PLAY_PAUSE',
+      payload: 'toggle',
+    });
+  }
 
   return (
     <>
@@ -192,9 +198,9 @@ function SuspenseTimelineInput() {
         <ButtonIcon type={'skip-previous'} />
       </Button>
       <Button
-        onClick={() => setPlaying(p => !p)}
         disabled={max === 0 && !playing}
-        title={playing ? 'Pause' : 'Play'}>
+        title={playing ? 'Pause' : 'Play'}
+        onClick={togglePlaying}>
         <ButtonIcon type={playing ? 'pause' : 'play'} />
       </Button>
       <Button
diff --git a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTreeContext.js b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTreeContext.js
index d93730b388b37..a4f7583dda611 100644
--- a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTreeContext.js
+++ b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTreeContext.js
@@ -32,6 +32,7 @@ export type SuspenseTreeState = {
   timeline: $ReadOnlyArray<SuspenseNode['id']>,
   timelineIndex: number | -1,
   uniqueSuspendersOnly: boolean,
+  playing: boolean,
 };
 
 type ACTION_SUSPENSE_TREE_MUTATION = {
@@ -64,13 +65,19 @@ type ACTION_SUSPENSE_SKIP_TIMELINE_INDEX = {
   type: 'SUSPENSE_SKIP_TIMELINE_INDEX',
   payload: boolean,
 };
+type ACTION_SUSPENSE_PLAY_PAUSE = {
+  type: 'SUSPENSE_PLAY_PAUSE',
+  payload: 'toggle' | 'play' | 'pause',
+};
+
 export type SuspenseTreeAction =
   | ACTION_SUSPENSE_TREE_MUTATION
   | ACTION_SET_SUSPENSE_LINEAGE
   | ACTION_SELECT_SUSPENSE_BY_ID
   | ACTION_SET_SUSPENSE_TIMELINE
   | ACTION_SUSPENSE_SET_TIMELINE_INDEX
-  | ACTION_SUSPENSE_SKIP_TIMELINE_INDEX;
+  | ACTION_SUSPENSE_SKIP_TIMELINE_INDEX
+  | ACTION_SUSPENSE_PLAY_PAUSE;
 export type SuspenseTreeDispatch = (action: SuspenseTreeAction) => void;
 
 const SuspenseTreeStateContext: ReactContext<SuspenseTreeState> =
@@ -112,6 +119,7 @@ function getInitialState(store: Store): SuspenseTreeState {
       timeline: [],
       timelineIndex: -1,
       uniqueSuspendersOnly,
+      playing: false,
     };
   } else {
     const timeline = store.getSuspendableDocumentOrderSuspense(
@@ -133,6 +141,7 @@ function getInitialState(store: Store): SuspenseTreeState {
       timeline,
       timelineIndex,
       uniqueSuspendersOnly,
+      playing: false,
     };
   }
 
@@ -239,6 +248,7 @@ function SuspenseTreeContextController({children}: Props): React.Node {
               ...state,
               selectedSuspenseID,
               selectedRootID,
+              playing: false, // pause
             };
           }
           case 'SET_SUSPENSE_LINEAGE': {
@@ -252,6 +262,7 @@ function SuspenseTreeContextController({children}: Props): React.Node {
               lineage,
               selectedSuspenseID: suspenseID,
               selectedRootID,
+              playing: false, // pause
             };
           }
           case 'SET_SUSPENSE_TIMELINE': {
@@ -307,6 +318,7 @@ function SuspenseTreeContextController({children}: Props): React.Node {
               lineage: nextLineage,
               selectedSuspenseID: nextSelectedSuspenseID,
               timelineIndex: nextTimelineIndex,
+              playing: false, // pause
             };
           }
           case 'SUSPENSE_SKIP_TIMELINE_INDEX': {
@@ -328,6 +340,33 @@ function SuspenseTreeContextController({children}: Props): React.Node {
               lineage: nextLineage,
               selectedSuspenseID: nextSelectedSuspenseID,
               timelineIndex: nextTimelineIndex,
+              playing: false, // pause
+            };
+          }
+          case 'SUSPENSE_PLAY_PAUSE': {
+            const mode = action.payload;
+
+            let nextTimelineIndex = state.timelineIndex;
+            let nextSelectedSuspenseID = state.selectedSuspenseID;
+            let nextLineage = state.lineage;
+
+            if (
+              !state.playing &&
+              mode !== 'pause' &&
+              nextTimelineIndex === state.timeline.length - 1
+            ) {
+              // If we're restarting at the end. Then loop around and start again from the beginning.
+              nextTimelineIndex = 0;
+              nextSelectedSuspenseID = state.timeline[nextTimelineIndex];
+              nextLineage = store.getSuspenseLineage(nextSelectedSuspenseID);
+            }
+
+            return {
+              ...state,
+              lineage: nextLineage,
+              selectedSuspenseID: nextSelectedSuspenseID,
+              timelineIndex: nextTimelineIndex,
+              playing: mode === 'toggle' ? !state.playing : mode === 'play',
             };
           }
           default:

From d0d58731fcbf3ea3f5243483525006975c515a2d Mon Sep 17 00:00:00 2001
From: Sebastian Markbage <sebastian@calyptus.eu>
Date: Fri, 26 Sep 2025 19:07:13 -0400
Subject: [PATCH 4/7] Fix alignment of collapse button

---
 .../src/devtools/views/SuspenseTab/SuspenseTab.css |  4 ++++
 .../src/devtools/views/SuspenseTab/SuspenseTab.js  | 14 +++++++-------
 .../views/SuspenseTab/SuspenseTimeline.css         |  1 -
 3 files changed, 11 insertions(+), 8 deletions(-)

diff --git a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTab.css b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTab.css
index cbb9e13709d72..c718be7ea9499 100644
--- a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTab.css
+++ b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTab.css
@@ -139,3 +139,7 @@
   grid-template-columns: 1fr auto;
   align-items: center;
 }
+
+.SuspenseTreeViewFooterButtons {
+  padding: 0.25rem;
+}
\ No newline at end of file
diff --git a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTab.js b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTab.js
index b0e08d4f4bd75..b4ed7ec1f93c8 100644
--- a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTab.js
+++ b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTab.js
@@ -441,14 +441,14 @@ function SuspenseTab(_: {}) {
               <SuspenseRects />
             </div>
             <footer className={styles.SuspenseTreeViewFooter}>
-              <div className={styles.SuspenseTimeline}>
-                <SuspenseTimeline />
+              <SuspenseTimeline />
+              <div className={styles.SuspenseTreeViewFooterButtons}>
+                <ToggleInspectedElement
+                  dispatch={dispatch}
+                  state={state}
+                  orientation="vertical"
+                />
               </div>
-              <ToggleInspectedElement
-                dispatch={dispatch}
-                state={state}
-                orientation="vertical"
-              />
             </footer>
           </div>
         </div>
diff --git a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTimeline.css b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTimeline.css
index 33441bcf34c00..08e7723ec0de4 100644
--- a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTimeline.css
+++ b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTimeline.css
@@ -1,5 +1,4 @@
 .SuspenseTimelineContainer {
-  width: 100%;
   display: flex;
   flex-direction: row;
   padding: 0.25rem;

From 767c57153cb39e419d041599f9c38492d938335f Mon Sep 17 00:00:00 2001
From: Sebastian Markbage <sebastian@calyptus.eu>
Date: Fri, 26 Sep 2025 19:18:26 -0400
Subject: [PATCH 5/7] Advance one step every second while playing

---
 .../views/SuspenseTab/SuspenseTimeline.js     | 18 ++++++++++-
 .../views/SuspenseTab/SuspenseTreeContext.js  | 30 ++++++++++++++++++-
 2 files changed, 46 insertions(+), 2 deletions(-)

diff --git a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTimeline.js b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTimeline.js
index f7fc031bfd836..06c5d448c5134 100644
--- a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTimeline.js
+++ b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTimeline.js
@@ -8,7 +8,7 @@
  */
 
 import * as React from 'react';
-import {useContext, useLayoutEffect, useRef} from 'react';
+import {useContext, useLayoutEffect, useEffect, useRef} from 'react';
 import {BridgeContext, StoreContext} from '../context';
 import {TreeDispatcherContext} from '../Components/TreeContext';
 import {useHighlightHostInstance} from '../hooks';
@@ -189,6 +189,22 @@ function SuspenseTimelineInput() {
     });
   }
 
+  useEffect(() => {
+    if (!playing) {
+      return undefined;
+    }
+    // While playing, advance one step every second.
+    const PLAY_SPEED_INTERVAL = 1000;
+    const timer = setInterval(() => {
+      suspenseTreeDispatch({
+        type: 'SUSPENSE_PLAY_TICK',
+      });
+    }, PLAY_SPEED_INTERVAL);
+    return () => {
+      clearInterval(timer);
+    };
+  }, [playing]);
+
   return (
     <>
       <Button
diff --git a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTreeContext.js b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTreeContext.js
index a4f7583dda611..d97b88952e5ae 100644
--- a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTreeContext.js
+++ b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTreeContext.js
@@ -69,6 +69,9 @@ type ACTION_SUSPENSE_PLAY_PAUSE = {
   type: 'SUSPENSE_PLAY_PAUSE',
   payload: 'toggle' | 'play' | 'pause',
 };
+type ACTION_SUSPENSE_PLAY_TICK = {
+  type: 'SUSPENSE_PLAY_TICK',
+};
 
 export type SuspenseTreeAction =
   | ACTION_SUSPENSE_TREE_MUTATION
@@ -77,7 +80,8 @@ export type SuspenseTreeAction =
   | ACTION_SET_SUSPENSE_TIMELINE
   | ACTION_SUSPENSE_SET_TIMELINE_INDEX
   | ACTION_SUSPENSE_SKIP_TIMELINE_INDEX
-  | ACTION_SUSPENSE_PLAY_PAUSE;
+  | ACTION_SUSPENSE_PLAY_PAUSE
+  | ACTION_SUSPENSE_PLAY_TICK;
 export type SuspenseTreeDispatch = (action: SuspenseTreeAction) => void;
 
 const SuspenseTreeStateContext: ReactContext<SuspenseTreeState> =
@@ -369,6 +373,30 @@ function SuspenseTreeContextController({children}: Props): React.Node {
               playing: mode === 'toggle' ? !state.playing : mode === 'play',
             };
           }
+          case 'SUSPENSE_PLAY_TICK': {
+            if (!state.playing) {
+              // We stopped but haven't yet cleaned up the callback. Noop.
+              return state;
+            }
+            // Advance time
+            const nextTimelineIndex = state.timelineIndex + 1;
+            if (nextTimelineIndex > state.timeline.length - 1) {
+              return state;
+            }
+            const nextSelectedSuspenseID = state.timeline[nextTimelineIndex];
+            const nextLineage = store.getSuspenseLineage(
+              nextSelectedSuspenseID,
+            );
+            // Stop once we reach the end.
+            const nextPlaying = nextTimelineIndex < state.timeline.length - 1;
+            return {
+              ...state,
+              lineage: nextLineage,
+              selectedSuspenseID: nextSelectedSuspenseID,
+              timelineIndex: nextTimelineIndex,
+              playing: nextPlaying,
+            };
+          }
           default:
             throw new Error(`Unrecognized action "${action.type}"`);
         }

From 01bd074ed7b110c31e370cf8263202e8b2b1c4a1 Mon Sep 17 00:00:00 2001
From: Sebastian Markbage <sebastian@calyptus.eu>
Date: Fri, 26 Sep 2025 19:30:45 -0400
Subject: [PATCH 6/7] Synchronize resuspending with the current timeline index

This uses an effect event since we're not reacting to changes in the
timeline after the timeline index has changed. Otherwise we'd infinite
loop.
---
 .../views/SuspenseTab/SuspenseTimeline.js     | 45 +++++++++++--------
 1 file changed, 26 insertions(+), 19 deletions(-)

diff --git a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTimeline.js b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTimeline.js
index 06c5d448c5134..8895e52c55794 100644
--- a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTimeline.js
+++ b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTimeline.js
@@ -101,26 +101,7 @@ function SuspenseTimelineInput() {
   }
 
   function handleChange(event: SyntheticEvent) {
-    if (rootID === null) {
-      return;
-    }
-    const rendererID = store.getRendererIDForElement(rootID);
-    if (rendererID === null) {
-      console.error(
-        `No renderer ID found for root element ${rootID} in suspense timeline.`,
-      );
-      return;
-    }
-
     const pendingTimelineIndex = +event.currentTarget.value;
-    const suspendedSet = timeline.slice(pendingTimelineIndex);
-
-    bridge.send('overrideSuspenseMilestone', {
-      rendererID,
-      rootID,
-      suspendedSet,
-    });
-
     switchSuspenseNode(pendingTimelineIndex);
   }
 
@@ -189,6 +170,32 @@ function SuspenseTimelineInput() {
     });
   }
 
+  // TODO: useEffectEvent here once it's supported in all versions DevTools supports.
+  // For now we just exclude it from deps since we don't lint those anyway.
+  function changeTimelineIndex(newIndex: number) {
+    // Synchronize timeline index with what is resuspended.
+    if (rootID === null) {
+      return;
+    }
+    const rendererID = store.getRendererIDForElement(rootID);
+    if (rendererID === null) {
+      console.error(
+        `No renderer ID found for root element ${rootID} in suspense timeline.`,
+      );
+      return;
+    }
+    const suspendedSet = timeline.slice(timelineIndex);
+    bridge.send('overrideSuspenseMilestone', {
+      rendererID,
+      rootID,
+      suspendedSet,
+    });
+  }
+
+  useEffect(() => {
+    changeTimelineIndex(timelineIndex);
+  }, [timelineIndex]);
+
   useEffect(() => {
     if (!playing) {
       return undefined;

From 010bb761538cfb06c2e09051fe51a54df376f3f5 Mon Sep 17 00:00:00 2001
From: Sebastian Markbage <sebastian@calyptus.eu>
Date: Sat, 27 Sep 2025 22:24:49 -0400
Subject: [PATCH 7/7] Suspend everything *after* the current selection

The first selection will be the root. We can't show anything suspended for
that. The next one should be one step after that.

This lets you see the final state by going to the end of the timeline.
---
 .../src/devtools/views/SuspenseTab/SuspenseTimeline.js      | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTimeline.js b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTimeline.js
index 8895e52c55794..59bc6c8506308 100644
--- a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTimeline.js
+++ b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTimeline.js
@@ -184,7 +184,11 @@ function SuspenseTimelineInput() {
       );
       return;
     }
-    const suspendedSet = timeline.slice(timelineIndex);
+    // We suspend everything after the current selection. The root isn't showing
+    // anything suspended in the root. The step after that should have one less
+    // thing suspended. I.e. the first suspense boundary should be unsuspended
+    // when it's selected. This also lets you show everything in the last step.
+    const suspendedSet = timeline.slice(timelineIndex + 1);
     bridge.send('overrideSuspenseMilestone', {
       rendererID,
       rootID,