From 61dd3b377dcf449faa8a0b66af757e73f2819196 Mon Sep 17 00:00:00 2001
From: dvcolomban <dinh-van.colomban@contentsquare.com>
Date: Mon, 10 Aug 2026 12:12:17 +0200
Subject: [PATCH 1/4] feat(core): render message actions as buttons on toast
 notifications
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Toasts only exposed the dismiss ✕ button; an entry's own `actions`
(e.g. an `activate` action that focuses a dock) were only rendered in
the messages panel's detail view. Render them as buttons in the
toast's `#actions` slot too, dispatching the same way the messages
panel does: `switchEntry(action.activate.dockId)`, the local
counterpart of the `hub:docks:activate` RPC our shell already handles
in `context.ts`.
---
 .../display/ToastOverlay.stories.ts           | 20 +++++++++++++++++++
 .../components/display/ToastOverlay.vue       | 19 ++++++++++++++++++
 2 files changed, 39 insertions(+)

diff --git a/packages/core/src/client/webcomponents/components/display/ToastOverlay.stories.ts b/packages/core/src/client/webcomponents/components/display/ToastOverlay.stories.ts
index 08b291914..46f6b8668 100644
--- a/packages/core/src/client/webcomponents/components/display/ToastOverlay.stories.ts
+++ b/packages/core/src/client/webcomponents/components/display/ToastOverlay.stories.ts
@@ -36,3 +36,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: 'info',
+          message: 'New a11y violation detected',
+          notify: true,
+          autoDismiss: 10 ** 7,
+          actions: [
+            { id: 'view', label: 'View', kind: 'activate', activate: { dockId: 'devframes-plugin-messages' } },
+          ],
+        }))
+      })
+      return () => h(ToastOverlay)
+    },
+  }),
+}
diff --git a/packages/core/src/client/webcomponents/components/display/ToastOverlay.vue b/packages/core/src/client/webcomponents/components/display/ToastOverlay.vue
index 9151b1bff..13939ee3a 100644
--- a/packages/core/src/client/webcomponents/components/display/ToastOverlay.vue
+++ b/packages/core/src/client/webcomponents/components/display/ToastOverlay.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import type { DevToolsMessageEntry } from '@vitejs/devtools-kit'
 import type { DocksContext } from '@vitejs/devtools-kit/client'
 import { selectMessage, useMessages } from '../../state/messages'
 import { dismissToast, useToasts } from '../../state/toasts'
@@ -22,6 +23,16 @@ function openMessages(toastId: string) {
   // (its dock id is the plugin's devframe id).
   props.context?.docks.switchEntry('devframes-plugin-messages')
 }
+
+// Mirrors the messages panel's own action dispatch (`onActivate` in
+// `@devframes/plugin-messages`'s `App.vue`): the only action kind today is
+// `activate`, which focuses a dock. Our shell handles the equivalent
+// `devframe:docks:activate` broadcast the same way (see `context.ts`), so
+// `switchEntry` is the local counterpart to that RPC call.
+function dispatchAction(action: NonNullable<DevToolsMessageEntry['actions']>[number]) {
+  if (action.kind === 'activate')
+    props.context?.docks.switchEntry(action.activate.dockId)
+}
 </script>
 
 <template>
@@ -43,6 +54,14 @@ function openMessages(toastId: string) {
       >
         <MessageItem :entry="toast.entry" compact class="px-3 py-2.5">
           <template #actions>
+            <button
+              v-for="action of toast.entry.actions"
+              :key="action.id"
+              class="flex-none text-xs px-1.5 py-0.5 rounded border border-base op70 hover:op100 hover:bg-active transition"
+              @click.stop="dispatchAction(action)"
+            >
+              {{ action.label }}
+            </button>
             <button
               class="flex-none op30 hover:op100 p-0.5 rounded hover:bg-active transition"
               @click.stop="dismissToast(toast.id)"

From 92c8e91bc45c047261ca42724137210bf4ab3403 Mon Sep 17 00:00:00 2001
From: dvcolomban <dinh-van.colomban@contentsquare.com>
Date: Mon, 10 Aug 2026 15:51:54 +0200
Subject: [PATCH 2/4] fix(core): correct the messages dock id used by
 ToastOverlay
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

`switchEntry('devframes-plugin-messages')` (hyphens) never matched the
actual mounted dock id, `devframes_plugin_messages` (`PLUGIN_ID` in
`@devframes/plugin-messages`'s `constants.ts`) — a typo introduced by
the devframe 0.6 migration (#396). Clicking a toast to open the
messages panel silently no-op'd; same typo had just been copied into
the new `WithAction` story added alongside toast action buttons.
---
 .../webcomponents/components/display/ToastOverlay.stories.ts  | 2 +-
 .../client/webcomponents/components/display/ToastOverlay.vue  | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/core/src/client/webcomponents/components/display/ToastOverlay.stories.ts b/packages/core/src/client/webcomponents/components/display/ToastOverlay.stories.ts
index 46f6b8668..e073b2ee8 100644
--- a/packages/core/src/client/webcomponents/components/display/ToastOverlay.stories.ts
+++ b/packages/core/src/client/webcomponents/components/display/ToastOverlay.stories.ts
@@ -48,7 +48,7 @@ export const WithAction: Story = {
           notify: true,
           autoDismiss: 10 ** 7,
           actions: [
-            { id: 'view', label: 'View', kind: 'activate', activate: { dockId: 'devframes-plugin-messages' } },
+            { id: 'view', label: 'View', kind: 'activate', activate: { dockId: 'devframes_plugin_messages' } },
           ],
         }))
       })
diff --git a/packages/core/src/client/webcomponents/components/display/ToastOverlay.vue b/packages/core/src/client/webcomponents/components/display/ToastOverlay.vue
index 13939ee3a..e9aadfe5a 100644
--- a/packages/core/src/client/webcomponents/components/display/ToastOverlay.vue
+++ b/packages/core/src/client/webcomponents/components/display/ToastOverlay.vue
@@ -20,8 +20,8 @@ function openMessages(toastId: string) {
   dismissToast(toastId)
   selectMessage(toastId)
   // Open the messages panel provided by `@devframes/plugin-messages`
-  // (its dock id is the plugin's devframe id).
-  props.context?.docks.switchEntry('devframes-plugin-messages')
+  // (its dock id is the plugin's devframe id, `PLUGIN_ID` in its `constants.ts`).
+  props.context?.docks.switchEntry('devframes_plugin_messages')
 }
 
 // Mirrors the messages panel's own action dispatch (`onActivate` in

From 6b05e54d7c62e422a5775af6b85e9158205ce0eb Mon Sep 17 00:00:00 2001
From: dvcolomban <dinh-van.colomban@contentsquare.com>
Date: Mon, 10 Aug 2026 15:52:03 +0200
Subject: [PATCH 3/4] feat(playground): add a toast-with-action demo to the
 debug dashboard

Manual coverage for the new toast action buttons (previous commit):
"Toast: With Action" fires a message with a `view` action that focuses
the messages dock, exercising `ToastOverlay`'s new `#actions` rendering
and `dispatchAction` end to end alongside the existing Quick Actions.
---
 playgrounds/core/src/pages/devtools.vue | 19 +++++++++++++++++++
 1 file changed, 19 insertions(+)

diff --git a/playgrounds/core/src/pages/devtools.vue b/playgrounds/core/src/pages/devtools.vue
index 921cab8bb..13b10b916 100644
--- a/playgrounds/core/src/pages/devtools.vue
+++ b/playgrounds/core/src/pages/devtools.vue
@@ -139,6 +139,21 @@ async function addNotification(msg: string, level: DevToolsMessageLevel) {
   })
 }
 
+/** Exercises the toast `#actions` slot (`dvcol/toast-message-actions`): a `view` button that focuses the messages dock, alongside the usual dismiss ✕. */
+async function addNotificationWithAction() {
+  if (!client.value)
+    return
+  await client.value.call('devtoolskit:internal:messages:add', {
+    message: 'New a11y violation detected',
+    level: 'warn',
+    notify: true,
+    autoDismiss: 10000,
+    actions: [
+      { id: 'view', label: 'View', kind: 'activate', activate: { dockId: 'devframes_plugin_messages' } },
+    ],
+  })
+}
+
 function incrementCounter() {
   if (!client.value)
     return
@@ -188,6 +203,10 @@ function incrementCounter() {
           <div class="i-ph-spinner-gap-duotone" />
           Loading -> Resolve
         </button>
+        <button class="btn-action-sm" @click="addNotificationWithAction()">
+          <div class="i-ph-cursor-click-duotone" />
+          Toast: With Action
+        </button>
         <button class="btn-action-sm" @click="addBatchMessages()">
           <div class="i-ph-list-plus-duotone" />
           Add All Levels

From a5494cf7fda93461cf0fde32928bb09bc2ec8456 Mon Sep 17 00:00:00 2001
From: dvcolomban <dinh-van.colomban@contentsquare.com>
Date: Mon, 10 Aug 2026 17:11:30 +0200
Subject: [PATCH 4/4] docs(core): trim verbose comments in ToastOverlay's
 action dispatch

---
 .../webcomponents/components/display/ToastOverlay.vue    | 9 ++-------
 1 file changed, 2 insertions(+), 7 deletions(-)

diff --git a/packages/core/src/client/webcomponents/components/display/ToastOverlay.vue b/packages/core/src/client/webcomponents/components/display/ToastOverlay.vue
index e9aadfe5a..ac14a16f8 100644
--- a/packages/core/src/client/webcomponents/components/display/ToastOverlay.vue
+++ b/packages/core/src/client/webcomponents/components/display/ToastOverlay.vue
@@ -19,16 +19,11 @@ const toasts = useToasts()
 function openMessages(toastId: string) {
   dismissToast(toastId)
   selectMessage(toastId)
-  // Open the messages panel provided by `@devframes/plugin-messages`
-  // (its dock id is the plugin's devframe id, `PLUGIN_ID` in its `constants.ts`).
+  /** Opens the messages panel from `@devframes/plugin-messages` (dock id: its `PLUGIN_ID`, from its `constants.ts`). */
   props.context?.docks.switchEntry('devframes_plugin_messages')
 }
 
-// Mirrors the messages panel's own action dispatch (`onActivate` in
-// `@devframes/plugin-messages`'s `App.vue`): the only action kind today is
-// `activate`, which focuses a dock. Our shell handles the equivalent
-// `devframe:docks:activate` broadcast the same way (see `context.ts`), so
-// `switchEntry` is the local counterpart to that RPC call.
+/** Mirrors the messages panel's own dispatch; an unhandled kind is a silent no-op. */
 function dispatchAction(action: NonNullable<DevToolsMessageEntry['actions']>[number]) {
   if (action.kind === 'activate')
     props.context?.docks.switchEntry(action.activate.dockId)