feat(messages): navigable message actions that focus a dock

Add an optional `actions` field to `DevframeMessageEntry` (a discriminated
union, `activate` implemented) so a message can request the viewer switch its
focused dock, deep-linking via the existing `hub:docks:activate` primitive. The
messages panel renders the actions in the detail pane and only when a hub
docks-activate capability is present, so standalone panels show no dead buttons.

Co-authored-with an agent.

Author: antfubot

packages/hub/src/types/messages.ts

@@ -21,6 +21,27 @@ export interface DevframeMessageFilePosition {
   column?: number
 }
 
+/**
+ * A labeled control a message can carry. Rendered by the messages panel; when
+ * clicked it drives the described intent. Discriminated by `kind` so further
+ * action kinds can be added without reshaping the field.
+ *
+ * `'activate'` requests the viewer switch its focused dock to `activate.dockId`
+ * (deep-linking via the opaque, serializable `activate.params` bag the target
+ * dock interprets), via the hub's `hub:docks:activate` RPC.
+ */
+export interface DevframeMessageActivateAction {
+  /** Stable id for the action within its entry. */
+  id: string
+  /** Button label shown in the messages panel. */
+  label: string
+  kind: 'activate'
+  /** The dock to focus, plus an optional deep-link params bag. */
+  activate: { dockId: string, params?: Record<string, unknown> }
+}
+
+export type DevframeMessageAction = DevframeMessageActivateAction
+
 export interface DevframeMessageEntry {
   /**
    * Unique identifier for this message entry (auto-generated if not provided)
@@ -66,6 +87,11 @@ export interface DevframeMessageEntry {
    * Optional tags/labels for filtering
    */
   labels?: string[]
+  /**
+   * Optional labeled actions (e.g. "navigate to a dock") the panel renders as
+   * clickable controls in the entry's detail view.
+   */
+  actions?: DevframeMessageAction[]
   /**
    * Time in ms to auto-dismiss the toast notification (client-side)
    */

plugins/messages/src/client/App.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import type { DevframeConnectionStatus, DevframeRpcClient } from 'devframe/client'
-import type { DevframeMessageEntry } from '../types'
+import type { DevframeMessageAction, DevframeMessageEntry } from '../types'
 import LayoutToolbar from '@antfu/design/components/Layout/LayoutToolbar.vue'
-import { computed, onBeforeUnmount, ref } from 'vue'
+import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
 import {
   button,
   connectionBody,
@@ -46,6 +46,29 @@ function reload(): void {
 // an editor with.
 const canOpenFile = computed(() => props.rpc.connectionMeta.backend !== 'static')
 
+// Message actions that navigate to another dock only work under a hub host
+// (the `hub:docks:activate` RPC + `devframe:docks` registry). Probe the docks
+// shared state so the affordance is hidden when there's no hub.
+const canActivate = ref(false)
+onMounted(() => {
+  props.rpc.sharedState
+    .get('devframe:docks', { initialValue: null })
+    .then((state: { value: () => unknown, on: (e: string, cb: (v: unknown) => void) => void }) => {
+      canActivate.value = state.value() != null
+      state.on('updated', v => (canActivate.value = v != null))
+    })
+    .catch(() => {})
+})
+
+async function onActivate(action: DevframeMessageAction): Promise<void> {
+  if (action.kind !== 'activate')
+    return
+  await (props.rpc.callOptional as (name: string, ...args: unknown[]) => Promise<unknown>)(
+    'hub:docks:activate',
+    action.activate,
+  )
+}
+
 async function onDismiss(id: string): Promise<void> {
   await props.rpc.call('devframes:plugin:messages:remove', id)
 }
@@ -124,11 +147,13 @@ async function onOpenFile(entry: DevframeMessageEntry): Promise<void> {
         v-else
         :entries="state.entries"
         :can-open-file="canOpenFile"
+        :can-activate="canActivate"
         @dismiss="onDismiss"
         @dismiss-many="onDismissMany"
         @clear="onClear"
         @persist="onPersist"
         @open-file="onOpenFile"
+        @activate="onActivate"
       />
     </div>
   </div>

plugins/messages/src/client/components/MessagesView.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { DevframeMessageEntry, DevframeMessageEntryFrom, DevframeMessageLevel } from '../../types'
+import type { DevframeMessageAction, DevframeMessageEntry, DevframeMessageEntryFrom, DevframeMessageLevel } from '../../types'
 import { useClipboard, useTimeAgo } from '@vueuse/core'
 import { computed, ref, watch } from 'vue'
 import FilterToggles from './FilterToggles.vue'
@@ -20,6 +20,8 @@ const props = defineProps<{
   entries: DevframeMessageEntry[]
   /** Show the "open file" affordance for entries with a `filePosition`. */
   canOpenFile?: boolean
+  /** Show entry `actions` (dock navigation works only under a hub host). */
+  canActivate?: boolean
 }>()
 
 const emit = defineEmits<{
@@ -33,6 +35,8 @@ const emit = defineEmits<{
   openFile: [entry: DevframeMessageEntry]
   /** Cancel an entry's `autoDelete` timer (viewing it pins it) */
   persist: [id: string]
+  /** Run one of the entry's actions (e.g. navigate to a dock) */
+  activate: [action: DevframeMessageAction]
 }>()
 
 function formatAbsoluteTime(ts: number): string {
@@ -387,6 +391,19 @@ function dismissFiltered() {
           <HashBadge v-for="label of selectedEntry.labels" :key="label" :label="label" class="cursor-pointer" @click="toggleLabelFilter(label)" />
         </div>
 
+        <!-- Actions (e.g. navigate to a dock) -->
+        <div v-if="canActivate && selectedEntry.actions && selectedEntry.actions.length" class="flex flex-wrap gap-1.5 mb-3">
+          <button
+            v-for="action of selectedEntry.actions"
+            :key="action.id"
+            class="flex items-center gap-1.5 text-sm px-2 py-1 rounded border border-base hover:bg-active transition"
+            @click="emit('activate', action)"
+          >
+            <div class="i-ph:arrow-square-out-duotone w-3.5 h-3.5" />
+            {{ action.label }}
+          </button>
+        </div>
+
         <!-- File position -->
         <button
           v-if="selectedEntry.filePosition && canOpenFile"

plugins/messages/src/types.ts

@@ -1,6 +1,8 @@
 // The plugin's data vocabulary is the hub's — re-exported so the SPA, the
 // embeddable client, and consumers can type against the plugin package alone.
 export type {
+  DevframeMessageAction,
+  DevframeMessageActivateAction,
   DevframeMessageEntry,
   DevframeMessageEntryFrom,
   DevframeMessageEntryInput,

tests/__snapshots__/tsnapi/@devframes/hub/index.snapshot.d.ts

@@ -50,6 +50,8 @@ export { DevframeDocksUserSettings }
 export { DevframeDockUserEntry }
 export { DevframeHost }
 export { DevframeHubContext }
+export { DevframeMessageAction }
+export { DevframeMessageActivateAction }
 export { DevframeMessageElementPosition }
 export { DevframeMessageEntry }
 export { DevframeMessageEntryFrom }

tests/__snapshots__/tsnapi/@devframes/hub/types.snapshot.d.ts

@@ -34,6 +34,8 @@ export { DevframeDocksUserSettings }
 export { DevframeDockUserEntry }
 export { DevframeHost }
 export { DevframeHubContext }
+export { DevframeMessageAction }
+export { DevframeMessageActivateAction }
 export { DevframeMessageElementPosition }
 export { DevframeMessageEntry }
 export { DevframeMessageEntryFrom }

tests/__snapshots__/tsnapi/@devframes/plugin-messages/types.snapshot.d.ts

@@ -2,6 +2,8 @@
  * Generated by tsnapi — public API snapshot of `@devframes/plugin-messages/types`
  */
 // #region Other
+export { DevframeMessageAction }
+export { DevframeMessageActivateAction }
 export { DevframeMessageEntry }
 export { DevframeMessageEntryFrom }
 export { DevframeMessageEntryInput }