Repository: storybook
Issue: [Feature Request]: Make the Addons Interactions to only show "FAIL" when the last expectation/step fails (and update docs)
Labels: feature request,needs triage

### Is your feature request related to a problem? Please describe

Hello!

So this is my first time using the Addon Interactions for Storybook 7 and I am loving it! Except one part, the status in the Addon Interactions always shows "FAIL" despite that the last step is successful. This happens when we're using `waitFor` and the "interval" is causing bunch of logs and I suppose the "retries" are making the status to "FAIL", despite that at the end of the day it eventually passes.

Repository for repro here: https://github.com/imballinst/vite-sb-msw-test-example. In the below image, all steps are successful, but still marked as fail (false negative, IMO). When tested using `yarn test-storybook`, it's also passing in the CLI. So I think, the behavior between CLI and the Addon Interactions should be consistent.

**Interactions result (fail)**

![image](https://github.com/storybookjs/storybook/assets/7077157/4e7f6028-3cbd-45b1-a38c-5e7c845b82df)

**CLI result (success)**

```
$ yarn test-storybook
yarn run v1.22.19
$ test-storybook
 PASS   browser: chromium  src/components/Homepage/Homepage.stories.tsx (6.673 s)
  Homepage
    MockedSuccess
      ✓ play-test (1275 ms)
    MockedError
      ✓ play-test (1026 ms)

Test Suites: 1 passed, 1 total
Tests:       2 passed, 2 total
Snapshots:   0 total
Time:        13.027 s
Ran all test suites.
Done in 17.54s.
```

### Describe the solution you'd like

In this line:

https://github.com/storybookjs/storybook/blob/9d495a7c645331a798f67f7c548dec6ea4e1820f/code/addons/interactions/src/Panel.tsx#L176

```diff
- const hasException = !!caughtException || interactions.some((v) => v.status === CallStates.ERROR);
+ const hasException = !!caughtException || (interactions && interactions.length && interactions[interactions.length - 1].status === CallStates.ERROR));
+ // or
+ // const hasException = !!caughtException || (interactions?.[interactions?.length - 1]?.status === CallStates.ERROR));
```

It results in this:

![image](https://github.com/storybookjs/storybook/assets/7077157/0fadf5d3-771a-4980-9edc-361c6244aa9b)

So, it will only throw error when actually the last step fails, which should be the case because when a step fails, it won't progress further. For example, here I intentionally queries for a nonexistent element, and until the wait times out, it will not continue the steps:

![image](https://github.com/storybookjs/storybook/assets/7077157/759372e4-6c50-41c3-b18f-e85080407d84)

Additionally, this part of the docs: https://storybook.js.org/addons/@storybook/addon-interactions, it mentions this:

> ...and expect have to be await-ed. While debugging, these functions return a Promise that won't resolve until you continue to the next step.

I don't think `expect` needs to be `await`-ed, though? It doesn't return Promise... or is it? Since it takes the [type as-is from Jest's expect](https://github.com/storybookjs/expect/blob/main/src/index.ts#L1-L4), CMIIW. And, it also doesn't make the status to "SUCCESS" when I added `await` to my `expect` calls. Instead, the IDE complains that the `await` doesn't have any effect.

### Describe alternatives you've considered

Not sure, maybe we can also make the CLI to also error out, but I don't think that's the correct approach. `waitFor` is there so that we can technically "wait" until something happens and it shouldn't be considered as a failing expectation.

### Are you able to assist to bring the feature to reality?

yes, I can

### Additional context

(apologies if this falls into bug category, I am not sure which one this belongs to)