diff --git a/packages/hub-ui/src/client/components/display/ToastOverlay.stories.ts b/packages/hub-ui/src/client/components/display/ToastOverlay.stories.ts
index 08b29191..70837db5 100644
--- a/packages/hub-ui/src/client/components/display/ToastOverlay.stories.ts
+++ b/packages/hub-ui/src/client/components/display/ToastOverlay.stories.ts
@@ -1,5 +1,6 @@
import type { Meta, StoryObj } from '@storybook/vue3-vite'
import { h, onMounted } from 'vue'
+import { MESSAGES_DOCK_ID } from '../../constants'
import { addToast } from '../../state/toasts'
import { message } from '../../stories/fixtures'
import ToastOverlay from './ToastOverlay.vue'
@@ -36,3 +37,23 @@ export const Stack: Story = {
},
}),
}
+
+/** A toast whose message carries an `activate` action, rendered alongside the dismiss control. */
+export const WithAction: Story = {
+ render: () => ({
+ setup() {
+ onMounted(() => {
+ addToast(message({
+ level: 'warn',
+ message: 'New a11y violation detected',
+ notify: true,
+ autoDismiss: 10 ** 7,
+ actions: [
+ { id: 'view', label: 'View', kind: 'activate', activate: { dockId: MESSAGES_DOCK_ID } },
+ ],
+ }))
+ })
+ return () => h(ToastOverlay)
+ },
+ }),
+}
diff --git a/packages/hub-ui/src/client/components/display/ToastOverlay.vue b/packages/hub-ui/src/client/components/display/ToastOverlay.vue
index f9b35ab7..bcd03f32 100644
--- a/packages/hub-ui/src/client/components/display/ToastOverlay.vue
+++ b/packages/hub-ui/src/client/components/display/ToastOverlay.vue
@@ -1,4 +1,5 @@
@@ -44,6 +59,14 @@ function openMessages(toastId: string) {
>
+