feat(core): render message actions as buttons on toast notifications

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)
+    },
+  }),
+}

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'
@@ -18,9 +19,14 @@ 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).
-  props.context?.docks.switchEntry('devframes-plugin-messages')
+  /** 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 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)
 }
 </script>
 
@@ -43,6 +49,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)"

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