From e0311e615817a2c9967358fc476abdbc0ecb59da Mon Sep 17 00:00:00 2001
From: "Anthony Fu (via agent)" <reg-github-bot@antfu.me>
Date: Fri, 24 Jul 2026 07:26:57 +0000
Subject: [PATCH 1/4] refactor(messages): split MessagesView, move
 search/actions to nav, reuse @antfu/design

---
 alias.ts                                      |   1 -
 plugins/messages/package.json                 |   2 +-
 plugins/messages/src/client/App.vue           |  36 +-
 .../components/FilterToggles.stories.ts       |   6 +-
 .../src/client/components/FilterToggles.vue   |  36 +-
 .../src/client/components/HashBadge.vue       |  17 -
 .../src/client/components/MessageDetail.vue   | 171 +++++++
 .../client/components/MessageFilterBar.vue    |  57 +++
 .../src/client/components/MessageItem.vue     |  18 +-
 .../src/client/components/MessageList.vue     |  47 ++
 .../components/MessageToolbarActions.vue      |  70 +++
 .../client/components/MessagesView.stories.ts |  29 +-
 .../src/client/components/MessagesView.vue    | 464 ++----------------
 .../src/client/components/_fixtures.ts        |   2 +-
 ...sageItemConstants.ts => message-styles.ts} |  14 +-
 .../client/composables/useMessageFilters.ts   | 174 +++++++
 plugins/messages/src/client/index.ts          |   7 +-
 plugins/messages/src/client/state/messages.ts |   2 +-
 plugins/messages/src/index.ts                 |   4 +-
 plugins/messages/src/rpc/functions/add.ts     |   2 +-
 plugins/messages/src/rpc/functions/list.ts    |   2 +-
 plugins/messages/src/rpc/functions/update.ts  |   2 +-
 plugins/messages/src/types.ts                 |   9 -
 plugins/messages/tsdown.config.ts             |   1 -
 pnpm-lock.yaml                                |   3 +
 .../plugin-messages/types.snapshot.d.ts       |  10 -
 .../plugin-messages/types.snapshot.js         |   4 -
 tsconfig.base.json                            |   3 -
 28 files changed, 654 insertions(+), 539 deletions(-)
 delete mode 100644 plugins/messages/src/client/components/HashBadge.vue
 create mode 100644 plugins/messages/src/client/components/MessageDetail.vue
 create mode 100644 plugins/messages/src/client/components/MessageFilterBar.vue
 create mode 100644 plugins/messages/src/client/components/MessageList.vue
 create mode 100644 plugins/messages/src/client/components/MessageToolbarActions.vue
 rename plugins/messages/src/client/components/{MessageItemConstants.ts => message-styles.ts} (75%)
 create mode 100644 plugins/messages/src/client/composables/useMessageFilters.ts
 delete mode 100644 plugins/messages/src/types.ts
 delete mode 100644 tests/__snapshots__/tsnapi/@devframes/plugin-messages/types.snapshot.d.ts
 delete mode 100644 tests/__snapshots__/tsnapi/@devframes/plugin-messages/types.snapshot.js

diff --git a/alias.ts b/alias.ts
index 636e0e28..96f5805c 100644
--- a/alias.ts
+++ b/alias.ts
@@ -101,7 +101,6 @@ export const alias = {
   '@devframes/plugin-messages/client': p('messages/src/client/index.ts'),
   '@devframes/plugin-messages/node': p('messages/src/node/index.ts'),
   '@devframes/plugin-messages/constants': p('messages/src/constants.ts'),
-  '@devframes/plugin-messages/types': p('messages/src/types.ts'),
   '@devframes/plugin-messages/rpc': p('messages/src/rpc/index.ts'),
   '@devframes/plugin-messages/cli': p('messages/src/cli.ts'),
   '@devframes/plugin-messages/vite': p('messages/src/vite.ts'),
diff --git a/plugins/messages/package.json b/plugins/messages/package.json
index e6da07c7..ac5efaab 100644
--- a/plugins/messages/package.json
+++ b/plugins/messages/package.json
@@ -27,7 +27,6 @@
     "./constants": "./dist/constants.mjs",
     "./node": "./dist/node/index.mjs",
     "./rpc": "./dist/rpc/index.mjs",
-    "./types": "./dist/types.mjs",
     "./vite": "./dist/vite.mjs",
     "./package.json": "./package.json"
   },
@@ -75,6 +74,7 @@
     "@vueuse/core": "catalog:frontend",
     "colorjs.io": "catalog:frontend",
     "devframe": "workspace:*",
+    "floating-vue": "catalog:frontend",
     "get-port-please": "catalog:deps",
     "h3": "catalog:deps",
     "storybook": "catalog:storybook",
diff --git a/plugins/messages/src/client/App.vue b/plugins/messages/src/client/App.vue
index eb68a4b5..6a88535c 100644
--- a/plugins/messages/src/client/App.vue
+++ b/plugins/messages/src/client/App.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
+import type { DevframeMessageEntry } from '@devframes/hub/types'
 import type { DevframeConnectionStatus, DevframeRpcClient } from 'devframe/client'
-import type { DevframeMessageEntry } from '../types'
+import FormSearchField from '@antfu/design/components/Form/FormSearchField.vue'
 import LayoutToolbar from '@antfu/design/components/Layout/LayoutToolbar.vue'
 import { computed, onBeforeUnmount, ref } from 'vue'
 import {
@@ -13,6 +14,8 @@ import {
   connectionTitle,
 } from '../../../../design/design'
 import MessagesView from './components/MessagesView.vue'
+import MessageToolbarActions from './components/MessageToolbarActions.vue'
+import { useMessageFilters } from './composables/useMessageFilters'
 import { useMessages } from './state/messages'
 
 const props = defineProps<{
@@ -21,6 +24,10 @@ const props = defineProps<{
 
 const state = useMessages(props.rpc)
 
+// Search / sort / filter state lives here (not in the view) so the nav bar's
+// search field + actions and the view's filter bar share one source of truth.
+const filters = useMessageFilters(() => state.entries)
+
 // The live feed rides on shared-state over the socket, so a dropped socket or
 // refused auth is surfaced instead of silently freezing the list. The client
 // doesn't auto-reconnect; a reload re-runs the whole handshake.
@@ -50,9 +57,9 @@ async function onDismiss(id: string): Promise<void> {
   await props.rpc.call('devframes:plugin:messages:remove', id)
 }
 
-async function onDismissMany(ids: string[]): Promise<void> {
-  for (const id of ids)
-    await props.rpc.call('devframes:plugin:messages:remove', id)
+async function onDismissFiltered(): Promise<void> {
+  for (const entry of filters.filteredEntries)
+    await props.rpc.call('devframes:plugin:messages:remove', entry.id)
 }
 
 async function onClear(): Promise<void> {
@@ -85,17 +92,26 @@ async function onOpenFile(entry: DevframeMessageEntry): Promise<void> {
       </div>
 
       <template #search>
-        <div />
+        <FormSearchField
+          v-if="!connState"
+          v-model="filters.search"
+          size="sm"
+          placeholder="Search messages…"
+          class="max-w-64"
+        />
       </template>
 
       <template #end>
+        <MessageToolbarActions
+          v-if="!connState"
+          :filters
+          @dismiss-filtered="onDismissFiltered"
+          @clear="onClear"
+        />
         <span v-if="conn" :class="conn.class">
           <span :class="conn.dot" />
           {{ conn.label }}
         </span>
-        <span v-if="state.entries.length > 0" class="badge-muted font-mono">
-          {{ state.entries.length }}
-        </span>
       </template>
     </LayoutToolbar>
 
@@ -122,11 +138,9 @@ async function onOpenFile(entry: DevframeMessageEntry): Promise<void> {
       </div>
       <MessagesView
         v-else
-        :entries="state.entries"
+        :filters
         :can-open-file="canOpenFile"
         @dismiss="onDismiss"
-        @dismiss-many="onDismissMany"
-        @clear="onClear"
         @persist="onPersist"
         @open-file="onOpenFile"
       />
diff --git a/plugins/messages/src/client/components/FilterToggles.stories.ts b/plugins/messages/src/client/components/FilterToggles.stories.ts
index a0014c93..84528b6d 100644
--- a/plugins/messages/src/client/components/FilterToggles.stories.ts
+++ b/plugins/messages/src/client/components/FilterToggles.stories.ts
@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/vue3-vite'
 import FilterToggles from './FilterToggles.vue'
-import { getHashColorFromString, levels } from './MessageItemConstants'
+import { levels } from './message-styles'
 
 const meta = {
   title: 'Messages/FilterToggles',
@@ -32,11 +32,11 @@ export const LevelsFiltered: Story = {
   },
 }
 
-export const HashColored: Story = {
+export const BadgeColored: Story = {
   args: {
     label: 'Category',
     items: ['a11y', 'lint', 'runtime', 'build'],
     active: new Set<string>(),
-    hashColor: getHashColorFromString,
+    badge: true,
   },
 }
diff --git a/plugins/messages/src/client/components/FilterToggles.vue b/plugins/messages/src/client/components/FilterToggles.vue
index 87bb3f09..09f0963d 100644
--- a/plugins/messages/src/client/components/FilterToggles.vue
+++ b/plugins/messages/src/client/components/FilterToggles.vue
@@ -1,39 +1,47 @@
 <script setup lang="ts">
+import DisplayBadge from '@antfu/design/components/Display/DisplayBadge.vue'
+
 defineProps<{
   label: string
   items: string[]
   active: Set<string>
-  /** Map item key → { icon, color, label } for styled items */
+  /** Map item key → { icon, color, label } for styled (level/source) items. */
   styles?: Record<string, { icon?: string, color?: string, label?: string }>
-  /** Compute inline color via hash for items without predefined styles */
-  hashColor?: (item: string, opacity: number) => string
+  /** Render items as hash-colored `DisplayBadge` chips (category/label). */
+  badge?: boolean
 }>()
 
 defineEmits<{
   toggle: [item: string]
 }>()
+
+function isDimmed(active: Set<string>, item: string): boolean {
+  return active.size > 0 && !active.has(item)
+}
 </script>
 
 <template>
-  <span class="text-xs op40">{{ label }}</span>
+  <span class="text-xs op-fade">{{ label }}</span>
   <div class="flex flex-wrap items-center gap-0.5">
     <button
       v-for="item of items"
       :key="item"
-      class="px-1.5 py-0.5 rounded text-xs flex items-center gap-0.5 hover:bg-active transition"
+      type="button"
+      class="rounded flex items-center transition hover:bg-active"
       :class="[
-        active.size === 0 || active.has(item)
-          ? (styles?.[item]?.color || '')
-          : 'op30',
+        badge ? 'p-0.5' : 'px-1.5 py-0.5 gap-0.5 text-xs',
+        !badge && !isDimmed(active, item) ? (styles?.[item]?.color || '') : '',
+        isDimmed(active, item) ? 'op30' : '',
       ]"
-      :style="!styles?.[item]?.color && hashColor ? {
-        color: active.size === 0 || active.has(item) ? hashColor(item, 1) : undefined,
-        backgroundColor: active.size === 0 || active.has(item) ? hashColor(item, 0.1) : undefined,
-      } : undefined"
       @click="$emit('toggle', item)"
     >
-      <div v-if="styles?.[item]?.icon" :class="styles[item]!.icon" class="w-3.5 h-3.5" />
-      <span>{{ styles?.[item]?.label || item }}</span>
+      <template v-if="badge">
+        <DisplayBadge :text="item" class="text-xs" />
+      </template>
+      <template v-else>
+        <div v-if="styles?.[item]?.icon" :class="styles[item]!.icon" class="w-3.5 h-3.5" />
+        <span>{{ styles?.[item]?.label || item }}</span>
+      </template>
     </button>
   </div>
 </template>
diff --git a/plugins/messages/src/client/components/HashBadge.vue b/plugins/messages/src/client/components/HashBadge.vue
deleted file mode 100644
index 44a7db03..00000000
--- a/plugins/messages/src/client/components/HashBadge.vue
+++ /dev/null
@@ -1,17 +0,0 @@
-<script setup lang="ts">
-import { computed } from 'vue'
-import { getHashColorFromString } from './MessageItemConstants'
-
-const props = defineProps<{
-  label: string
-}>()
-
-const style = computed(() => ({
-  color: getHashColorFromString(props.label),
-  backgroundColor: getHashColorFromString(props.label, 0.1),
-}))
-</script>
-
-<template>
-  <span class="text-xs px-1 rounded" :style="style">{{ label }}</span>
-</template>
diff --git a/plugins/messages/src/client/components/MessageDetail.vue b/plugins/messages/src/client/components/MessageDetail.vue
new file mode 100644
index 00000000..e07ae349
--- /dev/null
+++ b/plugins/messages/src/client/components/MessageDetail.vue
@@ -0,0 +1,171 @@
+<script setup lang="ts">
+import type { DevframeMessageEntry, DevframeMessageEntryFrom } from '@devframes/hub/types'
+import ActionIconButton from '@antfu/design/components/Action/ActionIconButton.vue'
+import DisplayBadge from '@antfu/design/components/Display/DisplayBadge.vue'
+import FeedbackSpinner from '@antfu/design/components/Feedback/FeedbackSpinner.vue'
+import LayoutSeparator from '@antfu/design/components/Layout/LayoutSeparator.vue'
+import { useClipboard, useTimeAgo } from '@vueuse/core'
+import { computed } from 'vue'
+import { fromEntries, levels } from './message-styles'
+
+const props = defineProps<{
+  entry: DevframeMessageEntry
+  /** Show the "open file" affordance for entries with a `filePosition`. */
+  canOpenFile?: boolean
+}>()
+
+const emit = defineEmits<{
+  close: []
+  dismiss: [id: string]
+  openFile: [entry: DevframeMessageEntry]
+  toggleCategory: [category: string]
+  toggleLabel: [label: string]
+}>()
+
+const timeAgo = useTimeAgo(computed(() => props.entry.timestamp))
+const { copy: copyStacktrace, copied: stacktraceCopied } = useClipboard()
+
+const from = computed(() => fromEntries[props.entry.from as DevframeMessageEntryFrom])
+
+function formatAbsoluteTime(ts: number): string {
+  return new Date(ts).toLocaleTimeString()
+}
+
+function filePositionLabel(pos: NonNullable<DevframeMessageEntry['filePosition']>): string {
+  let path = pos.file
+  if (pos.line)
+    path += `:${pos.line}`
+  if (pos.column)
+    path += `:${pos.column}`
+  return path
+}
+</script>
+
+<template>
+  <div class="h-full of-y-auto border-l border-base p-4">
+    <!-- Header -->
+    <div class="flex items-start gap-2 mb-3">
+      <div class="flex-1 font-medium text-lg">
+        {{ entry.message }}
+      </div>
+      <ActionIconButton
+        icon="i-ph:trash-duotone"
+        tooltip="Dismiss"
+        label="Dismiss"
+        @click="emit('dismiss', entry.id)"
+      />
+      <ActionIconButton
+        icon="i-ph:x"
+        tooltip="Close detail"
+        label="Close detail"
+        @click="emit('close')"
+      />
+    </div>
+
+    <!-- Metadata row -->
+    <div class="flex flex-wrap items-center gap-2 mb-3 text-xs">
+      <span class="flex items-center gap-1" :class="levels[entry.level].color">
+        <div :class="levels[entry.level].icon" class="w-3.5 h-3.5" />
+        <span class="capitalize">{{ entry.level }}</span>
+      </span>
+      <span v-if="from" class="flex items-center gap-1" :class="from.color">
+        <div :class="from.icon" class="w-3.5 h-3.5" />
+        {{ from.label }}
+      </span>
+      <span v-if="entry.status === 'loading'" class="flex items-center gap-1 text-amber">
+        <FeedbackSpinner size="0.75rem" />
+        Loading
+      </span>
+      <span class="op40" :title="formatAbsoluteTime(entry.timestamp)">
+        {{ timeAgo }}
+      </span>
+      <span v-if="entry.notify" class="flex items-center gap-0.5 op40">
+        <div class="i-ph:bell-duotone w-3.5 h-3.5" />
+        notify
+      </span>
+    </div>
+
+    <!-- Description -->
+    <div v-if="entry.description" class="text-sm op80 mb-3 whitespace-pre-wrap">
+      {{ entry.description }}
+    </div>
+
+    <!-- Category + Labels -->
+    <div v-if="entry.category || entry.labels?.length" class="flex flex-wrap gap-1 mb-3">
+      <DisplayBadge v-if="entry.category" :text="entry.category" as="button" class="text-xs cursor-pointer" @click="emit('toggleCategory', entry.category)" />
+      <DisplayBadge v-for="label of entry.labels" :key="label" :text="label" as="button" class="text-xs cursor-pointer" @click="emit('toggleLabel', label)" />
+    </div>
+
+    <!-- File position -->
+    <button
+      v-if="entry.filePosition && canOpenFile"
+      type="button"
+      class="flex items-start gap-1.5 text-left text-sm color-active hover:underline mb-3 break-all"
+      @click="emit('openFile', entry)"
+    >
+      <div class="i-ph:file-code-duotone w-4 h-4 flex-none mt-0.5" />
+      <span>{{ filePositionLabel(entry.filePosition) }}</span>
+    </button>
+    <div
+      v-else-if="entry.filePosition"
+      class="flex items-start gap-1.5 text-sm op60 mb-3 break-all"
+    >
+      <div class="i-ph:file-code-duotone w-4 h-4 flex-none mt-0.5" />
+      <span>{{ filePositionLabel(entry.filePosition) }}</span>
+    </div>
+
+    <!-- Element position -->
+    <div v-if="entry.elementPosition" class="text-sm mb-3 bg-gray/5 rounded p-2">
+      <div class="op50 text-xs mb-1">
+        Element
+      </div>
+      <div v-if="entry.elementPosition.selector" class="font-mono text-xs">
+        {{ entry.elementPosition.selector }}
+      </div>
+      <div v-if="entry.elementPosition.description" class="text-xs op70 mt-1">
+        {{ entry.elementPosition.description }}
+      </div>
+      <div v-if="entry.elementPosition.boundingBox" class="text-xs op50 mt-1 font-mono">
+        {{ entry.elementPosition.boundingBox.x }}, {{ entry.elementPosition.boundingBox.y }}
+        ({{ entry.elementPosition.boundingBox.width }} × {{ entry.elementPosition.boundingBox.height }})
+      </div>
+    </div>
+
+    <!-- Stacktrace -->
+    <div v-if="entry.stacktrace" class="mb-3">
+      <div class="op50 text-xs mb-1">
+        Stack Trace
+      </div>
+      <div class="group relative">
+        <pre class="text-xs bg-gray/5 rounded p-2 of-x-auto whitespace-pre-wrap font-mono">{{ entry.stacktrace }}</pre>
+        <ActionIconButton
+          compact
+          class="absolute top-1.5 right-1.5 op0 group-hover:op100 text-xs bg-base border border-base"
+          :icon="stacktraceCopied ? 'i-ph:check' : 'i-ph:copy'"
+          tooltip="Copy"
+          label="Copy stack trace"
+          @click="copyStacktrace(entry.stacktrace)"
+        />
+      </div>
+    </div>
+
+    <!-- Timers -->
+    <div v-if="entry.autoDismiss || entry.autoDelete" class="flex flex-wrap gap-3 mb-3 text-xs op50">
+      <span v-if="entry.autoDismiss" class="flex items-center gap-1">
+        <div class="i-ph:bell-slash-duotone w-3.5 h-3.5" />
+        Auto-dismiss: {{ entry.autoDismiss / 1000 }}s
+      </span>
+      <span v-if="entry.autoDelete" class="flex items-center gap-1">
+        <div class="i-ph:timer-duotone w-3.5 h-3.5" />
+        Auto-delete: {{ entry.autoDelete / 1000 }}s
+      </span>
+    </div>
+
+    <!-- ID + Timestamp -->
+    <LayoutSeparator />
+    <div class="flex flex-col gap-1 text-xs op40 font-mono">
+      <span>ID: {{ entry.id }}</span>
+      <span>{{ formatAbsoluteTime(entry.timestamp) }} ({{ new Date(entry.timestamp).toLocaleDateString() }})</span>
+    </div>
+  </div>
+</template>
diff --git a/plugins/messages/src/client/components/MessageFilterBar.vue b/plugins/messages/src/client/components/MessageFilterBar.vue
new file mode 100644
index 00000000..7baa5d02
--- /dev/null
+++ b/plugins/messages/src/client/components/MessageFilterBar.vue
@@ -0,0 +1,57 @@
+<script setup lang="ts">
+import type { DevframeMessageEntryFrom } from '@devframes/hub/types'
+import type { MessageFilters } from '../composables/useMessageFilters'
+import LayoutSeparator from '@antfu/design/components/Layout/LayoutSeparator.vue'
+import FilterToggles from './FilterToggles.vue'
+import { fromEntries, levels } from './message-styles'
+
+const props = defineProps<{
+  filters: MessageFilters
+}>()
+
+const { filters } = props
+</script>
+
+<template>
+  <div class="border-base border-b px-3 py-2 flex flex-wrap items-center gap-1">
+    <FilterToggles
+      label="Level"
+      :items="filters.allLevels"
+      :active="(filters.activeLevels as Set<string>)"
+      :styles="levels"
+      @toggle="filters.toggleLevel"
+    />
+
+    <LayoutSeparator orientation="vertical" class="!h-4" />
+
+    <FilterToggles
+      label="From"
+      :items="filters.allSources"
+      :active="(filters.activeSources as Set<string>)"
+      :styles="fromEntries"
+      @toggle="(item) => filters.toggleSource(item as DevframeMessageEntryFrom)"
+    />
+
+    <template v-if="filters.allCategories.length > 0">
+      <LayoutSeparator orientation="vertical" class="!h-4" />
+      <FilterToggles
+        label="Category"
+        :items="filters.allCategories"
+        :active="(filters.activeCategories as Set<string>)"
+        badge
+        @toggle="filters.toggleCategory"
+      />
+    </template>
+
+    <template v-if="filters.allLabels.length > 0">
+      <LayoutSeparator orientation="vertical" class="!h-4" />
+      <FilterToggles
+        label="Labels"
+        :items="filters.allLabels"
+        :active="(filters.activeLabels as Set<string>)"
+        badge
+        @toggle="filters.toggleLabel"
+      />
+    </template>
+  </div>
+</template>
diff --git a/plugins/messages/src/client/components/MessageItem.vue b/plugins/messages/src/client/components/MessageItem.vue
index 9cdbd047..95f5a826 100644
--- a/plugins/messages/src/client/components/MessageItem.vue
+++ b/plugins/messages/src/client/components/MessageItem.vue
@@ -1,8 +1,9 @@
 <script setup lang="ts">
-import type { DevframeMessageEntry } from '../../types'
+import type { DevframeMessageEntry } from '@devframes/hub/types'
+import DisplayBadge from '@antfu/design/components/Display/DisplayBadge.vue'
+import FeedbackSpinner from '@antfu/design/components/Feedback/FeedbackSpinner.vue'
 import { useTimeAgo } from '@vueuse/core'
-import HashBadge from './HashBadge.vue'
-import { levels } from './MessageItemConstants'
+import { levels } from './message-styles'
 
 const props = defineProps<{
   entry: DevframeMessageEntry
@@ -16,9 +17,10 @@ const timeAgo = useTimeAgo(() => props.entry.timestamp)
   <div class="flex items-start gap-2 relative">
     <div class="w-2px flex-none absolute left-0 top-4px bottom-4px rounded-r" :class="[levels[entry.level]?.bg || 'bg-gray']" />
 
-    <div
+    <FeedbackSpinner
       v-if="entry.status === 'loading'"
-      class="flex-none mt-0.5 border-2 border-current border-t-transparent rounded-full animate-spin op50 w-4 h-4"
+      size="1rem"
+      class="flex-none mt-0.5 op50"
     />
     <div
       v-else
@@ -37,9 +39,9 @@ const timeAgo = useTimeAgo(() => props.entry.timestamp)
       <div v-if="entry.description" class="text-xs op80 whitespace-pre-wrap">
         {{ entry.description }}
       </div>
-      <div v-if="!compact" class="flex flex-wrap items-center gap-x-2 gap-y-0.5">
-        <HashBadge v-if="entry.category" :label="entry.category" />
-        <HashBadge v-for="label of entry.labels" :key="label" :label="label" />
+      <div v-if="!compact && (entry.category || entry.labels?.length)" class="flex flex-wrap items-center gap-1">
+        <DisplayBadge v-if="entry.category" :text="entry.category" class="text-xs" />
+        <DisplayBadge v-for="label of entry.labels" :key="label" :text="label" class="text-xs" />
       </div>
     </div>
   </div>
diff --git a/plugins/messages/src/client/components/MessageList.vue b/plugins/messages/src/client/components/MessageList.vue
new file mode 100644
index 00000000..3ed65ae4
--- /dev/null
+++ b/plugins/messages/src/client/components/MessageList.vue
@@ -0,0 +1,47 @@
+<script setup lang="ts">
+import type { DevframeMessageEntry } from '@devframes/hub/types'
+import ActionIconButton from '@antfu/design/components/Action/ActionIconButton.vue'
+import FeedbackEmptyState from '@antfu/design/components/Feedback/FeedbackEmptyState.vue'
+import MessageItem from './MessageItem.vue'
+
+defineProps<{
+  entries: DevframeMessageEntry[]
+  selectedId: string | null
+}>()
+
+defineEmits<{
+  select: [id: string]
+  dismiss: [id: string]
+}>()
+</script>
+
+<template>
+  <div class="h-full of-y-auto">
+    <FeedbackEmptyState
+      v-if="entries.length === 0"
+      icon="i-ph:tray-duotone"
+      title="No messages"
+    />
+    <div
+      v-for="entry of entries"
+      :key="entry.id"
+      :data-selected="selectedId === entry.id || undefined"
+      class="w-full text-left border-b border-base hover:bg-active transition text-sm group cursor-pointer"
+      :class="[selectedId === entry.id ? 'bg-active' : '']"
+      @click="$emit('select', entry.id)"
+    >
+      <MessageItem :entry class="px-3 py-2.5">
+        <template #actions>
+          <ActionIconButton
+            compact
+            class="op0 group-hover:op100 flex-none text-xs"
+            icon="i-ph:trash-duotone"
+            tooltip="Dismiss"
+            label="Dismiss"
+            @click.stop="$emit('dismiss', entry.id)"
+          />
+        </template>
+      </MessageItem>
+    </div>
+  </div>
+</template>
diff --git a/plugins/messages/src/client/components/MessageToolbarActions.vue b/plugins/messages/src/client/components/MessageToolbarActions.vue
new file mode 100644
index 00000000..b9ab18bc
--- /dev/null
+++ b/plugins/messages/src/client/components/MessageToolbarActions.vue
@@ -0,0 +1,70 @@
+<script setup lang="ts">
+import type { MessageFilters } from '../composables/useMessageFilters'
+import ActionButton from '@antfu/design/components/Action/ActionButton.vue'
+import ActionIconButton from '@antfu/design/components/Action/ActionIconButton.vue'
+import DisplayBadge from '@antfu/design/components/Display/DisplayBadge.vue'
+import LayoutSeparator from '@antfu/design/components/Layout/LayoutSeparator.vue'
+
+const props = defineProps<{
+  filters: MessageFilters
+}>()
+
+defineEmits<{
+  /** Dismiss every entry matching the current filter. */
+  dismissFiltered: []
+  /** Dismiss all entries. */
+  clear: []
+}>()
+
+const { filters } = props
+</script>
+
+<template>
+  <ActionIconButton
+    class="text-sm"
+    :icon="filters.sortIcon"
+    :tooltip="filters.sortLabel"
+    label="Change sort order"
+    @click="filters.cycleSortMode"
+  />
+
+  <DisplayBadge v-if="filters.totalCount > 0" :color="false" class="text-xs font-mono">
+    <template v-if="filters.filteredCount !== filters.totalCount">
+      {{ filters.filteredCount }}/{{ filters.totalCount }}
+    </template>
+    <template v-else>
+      {{ filters.totalCount }}
+    </template>
+  </DisplayBadge>
+
+  <template v-if="filters.hasActiveFilter">
+    <ActionButton
+      variant="text"
+      size="sm"
+      icon="i-ph:funnel-x-duotone"
+      @click="filters.resetFilters"
+    >
+      Reset
+    </ActionButton>
+    <ActionButton
+      v-if="filters.filteredCount > 0"
+      variant="text"
+      size="sm"
+      icon="i-ph:trash-duotone"
+      @click="$emit('dismissFiltered')"
+    >
+      Dismiss filtered
+    </ActionButton>
+  </template>
+  <ActionButton
+    v-else-if="filters.totalCount > 0"
+    variant="text"
+    size="sm"
+    icon="i-ph:trash-duotone"
+    @click="$emit('clear')"
+  >
+    Dismiss all
+  </ActionButton>
+
+  <LayoutSeparator orientation="vertical" class="!h-4" />
+</template>
diff --git a/plugins/messages/src/client/components/MessagesView.stories.ts b/plugins/messages/src/client/components/MessagesView.stories.ts
index c6d673d0..bbdf46db 100644
--- a/plugins/messages/src/client/components/MessagesView.stories.ts
+++ b/plugins/messages/src/client/components/MessagesView.stories.ts
@@ -1,22 +1,29 @@
+import type { DevframeMessageEntry } from '@devframes/hub/types'
 import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import { useMessageFilters } from '../composables/useMessageFilters'
 import { makeSampleEntries } from './_fixtures'
 import MessagesView from './MessagesView.vue'
 
+// The view is driven by the shared `filters` façade (owned by `App.vue` in the
+// real app); each story seeds one from a fixed entry list.
+interface StoryArgs {
+  entries: DevframeMessageEntry[]
+  canOpenFile?: boolean
+}
+
 const meta = {
   title: 'Messages/MessagesView',
   component: MessagesView,
   tags: ['autodocs'],
-  argTypes: {
-    onDismiss: { action: 'dismissed' },
-    onDismissMany: { action: 'dismissed many' },
-    onClear: { action: 'cleared' },
-    onOpenFile: { action: 'opened file' },
-    onPersist: { action: 'persisted' },
-  },
-  decorators: [
-    () => ({ template: '<div class="h-120 bg-base color-base"><story /></div>' }),
-  ],
-} satisfies Meta<typeof MessagesView>
+  render: (args: StoryArgs) => ({
+    components: { MessagesView },
+    setup() {
+      const filters = useMessageFilters(() => args.entries)
+      return { filters, args }
+    },
+    template: '<div class="h-120 bg-base color-base"><MessagesView :filters="filters" :can-open-file="args.canOpenFile" /></div>',
+  }),
+} satisfies Meta<StoryArgs>
 
 export default meta
 type Story = StoryObj<typeof meta>
diff --git a/plugins/messages/src/client/components/MessagesView.vue b/plugins/messages/src/client/components/MessagesView.vue
index fd4fb589..49500cd6 100644
--- a/plugins/messages/src/client/components/MessagesView.vue
+++ b/plugins/messages/src/client/components/MessagesView.vue
@@ -1,15 +1,15 @@
 <script setup lang="ts">
-import type { DevframeMessageEntry, DevframeMessageEntryFrom, DevframeMessageLevel } from '../../types'
-import { useClipboard, useTimeAgo } from '@vueuse/core'
+import type { DevframeMessageEntry } from '@devframes/hub/types'
+import type { MessageFilters } from '../composables/useMessageFilters'
 import { computed, ref, watch } from 'vue'
-import FilterToggles from './FilterToggles.vue'
-import HashBadge from './HashBadge.vue'
-import MessageItem from './MessageItem.vue'
-import { fromEntries, getHashColorFromString, levelPriority, levels } from './MessageItemConstants'
-
-// Ported from vitejs/devtools' `ViewBuiltinMessages.vue`, split into a dumb
-// view: the feed comes in as a prop, mutations go out as emits (the smart
-// wrapper maps them onto the `devframes:plugin:messages:*` RPCs).
+import MessageDetail from './MessageDetail.vue'
+import MessageFilterBar from './MessageFilterBar.vue'
+import MessageList from './MessageList.vue'
+
+// The dumb view: filter/search/sort state rides on the shared `filters` façade
+// (owned by the smart `App.vue` so the nav bar can drive it too); per-entry
+// mutations go out as emits (the wrapper maps them onto the
+// `devframes:plugin:messages:*` RPCs).
 //
 // TODO(toasts): the upstream view also participates in toast selection —
 // `pendingSelectId` (set by clicking a toast) selects + scrolls an entry into
@@ -17,448 +17,64 @@ import { fromEntries, getHashColorFromString, levelPriority, levels } from './Me
 // Reintroduce both alongside a ToastOverlay port when a viewer needs them.
 
 const props = defineProps<{
-  entries: DevframeMessageEntry[]
+  filters: MessageFilters
   /** Show the "open file" affordance for entries with a `filePosition`. */
   canOpenFile?: boolean
 }>()
 
 const emit = defineEmits<{
-  /** Dismiss (remove) one entry */
+  /** Dismiss (remove) one entry. */
   dismiss: [id: string]
-  /** Dismiss every entry matching the current filter */
-  dismissMany: [ids: string[]]
-  /** Dismiss all entries */
-  clear: []
-  /** Open the entry's `filePosition` in the editor */
+  /** Open the entry's `filePosition` in the editor. */
   openFile: [entry: DevframeMessageEntry]
-  /** Cancel an entry's `autoDelete` timer (viewing it pins it) */
+  /** Cancel an entry's `autoDelete` timer (viewing it pins it). */
   persist: [id: string]
 }>()
 
-function formatAbsoluteTime(ts: number): string {
-  return new Date(ts).toLocaleTimeString()
-}
-
-type SortMode = 'newest' | 'oldest' | 'level'
-
-const allLevels: DevframeMessageLevel[] = Object.keys(levels) as DevframeMessageLevel[]
-const allSources: DevframeMessageEntryFrom[] = Object.keys(fromEntries) as DevframeMessageEntryFrom[]
-
-const sortLabels: Record<SortMode, string> = {
-  newest: 'Newest first',
-  oldest: 'Oldest first',
-  level: 'By severity',
-}
-const sortIcons: Record<SortMode, string> = {
-  newest: 'i-ph:sort-descending-duotone',
-  oldest: 'i-ph:sort-ascending-duotone',
-  level: 'i-ph:warning-diamond-duotone',
-}
-
-const search = ref('')
 const selectedId = ref<string | null>(null)
-const activeFilters = ref<Set<DevframeMessageLevel>>(new Set())
-const activeLabelFilters = ref<Set<string>>(new Set())
-const activeFromFilters = ref<Set<DevframeMessageEntryFrom>>(new Set())
-const activeCategories = ref<Set<string>>(new Set())
-const sortBy = ref<SortMode>('newest')
-
-const sortModes: SortMode[] = ['newest', 'oldest', 'level']
-
-function cycleSortMode() {
-  const idx = sortModes.indexOf(sortBy.value)!
-  sortBy.value = sortModes[(idx + 1) % sortModes.length] as SortMode
-}
-
-function toggleFilter(level: string) {
-  const filters = activeFilters.value
-  if (filters.has(level as DevframeMessageLevel))
-    filters.delete(level as DevframeMessageLevel)
-  else
-    filters.add(level as DevframeMessageLevel)
-}
-
-function toggleLabelFilter(label: string) {
-  const filters = activeLabelFilters.value
-  if (filters.has(label))
-    filters.delete(label)
-  else
-    filters.add(label)
-}
-
-function toggleFrom(from: DevframeMessageEntryFrom) {
-  const s = activeFromFilters.value
-  if (s.has(from))
-    s.delete(from)
-  else
-    s.add(from)
-}
-
-function toggleCategory(category: string) {
-  const c = activeCategories.value
-  if (c.has(category))
-    c.delete(category)
-  else
-    c.add(category)
-}
-
-const hasActiveFilter = computed(() => {
-  return activeFilters.value.size > 0
-    || activeLabelFilters.value.size > 0
-    || activeFromFilters.value.size > 0
-    || activeCategories.value.size > 0
-    || search.value.length > 0
-})
-
-function resetFilters() {
-  activeFilters.value.clear()
-  activeLabelFilters.value.clear()
-  activeFromFilters.value.clear()
-  activeCategories.value.clear()
-  search.value = ''
-}
-
-const allLabels = computed(() => {
-  const labels = new Set<string>()
-  for (const entry of props.entries) {
-    if (entry.labels) {
-      for (const label of entry.labels)
-        labels.add(label)
-    }
-  }
-  return Array.from(labels).sort()
-})
-
-const allCategories = computed(() => {
-  const cats = new Set<string>()
-  for (const entry of props.entries) {
-    if (entry.category)
-      cats.add(entry.category)
-  }
-  return Array.from(cats).sort()
-})
-
-const filteredEntries = computed(() => {
-  let entries = props.entries
-  if (activeFilters.value.size > 0)
-    entries = entries.filter(e => activeFilters.value.has(e.level))
-  if (activeLabelFilters.value.size > 0)
-    entries = entries.filter(e => e.labels?.some(l => activeLabelFilters.value.has(l)))
-  if (activeFromFilters.value.size > 0)
-    entries = entries.filter(e => activeFromFilters.value.has(e.from as DevframeMessageEntryFrom))
-  if (activeCategories.value.size > 0)
-    entries = entries.filter(e => e.category && activeCategories.value.has(e.category))
-  if (search.value) {
-    const q = search.value.toLowerCase()
-    entries = entries.filter(e =>
-      e.message.toLowerCase().includes(q)
-      || e.description?.toLowerCase().includes(q)
-      || e.from?.toLowerCase().includes(q)
-      || e.category?.toLowerCase().includes(q)
-      || e.labels?.some(l => l.toLowerCase().includes(q)),
-    )
-  }
 
-  // Sort
-  if (sortBy.value === 'oldest')
-    return [...entries]
-  if (sortBy.value === 'level')
-    return entries.toSorted((a, b) => levelPriority[a.level] - levelPriority[b.level])
-  return entries.toReversed()
-})
-
-const selectedEntry = computed(() => {
-  if (!selectedId.value)
-    return null
-  return props.entries.find(e => e.id === selectedId.value) ?? null
-})
+const selectedEntry = computed(() =>
+  selectedId.value == null ? null : props.filters.allEntries.find(e => e.id === selectedId.value) ?? null)
 
+// Viewing an auto-deleting entry pins it, so it can't vanish mid-read.
 watch(selectedEntry, (entry) => {
-  if (!entry?.autoDelete)
-    return
-
-  emit('persist', entry.id)
+  if (entry?.autoDelete)
+    emit('persist', entry.id)
 })
 
-const selectedTimeAgo = useTimeAgo(computed(() => selectedEntry.value?.timestamp ?? Date.now()))
-const { copy: copyStacktrace, copied: stacktraceCopied } = useClipboard()
-
-function openFile(entry: DevframeMessageEntry) {
-  if (!entry.filePosition)
-    return
-  emit('openFile', entry)
+function toggleSelect(id: string): void {
+  selectedId.value = selectedId.value === id ? null : id
 }
 
-function clearAll() {
-  emit('clear')
-  selectedId.value = null
-}
-
-function removeEntry(id: string) {
+function removeEntry(id: string): void {
   emit('dismiss', id)
   if (selectedId.value === id)
     selectedId.value = null
 }
-
-function dismissFiltered() {
-  emit('dismissMany', filteredEntries.value.map(e => e.id))
-  selectedId.value = null
-}
 </script>
 
 <template>
   <div class="w-full h-full grid grid-rows-[max-content_1fr]">
-    <!-- Toolbar -->
-    <div class="border-base border-b p3 flex flex-col gap-2">
-      <!-- Row 1: Search + sort + actions -->
-      <div class="flex items-center gap-1">
-        <input
-          v-model="search"
-          type="text"
-          placeholder="Search messages..."
-          class="bg-transparent border border-base rounded px-2 py-0.5 text-xs w-48 outline-none focus:border-active"
-        >
-        <button
-          class="flex items-center gap-0.5 op50 hover:op100 p-1 rounded hover:bg-active transition"
-          :title="sortLabels[sortBy]"
-          @click="cycleSortMode"
-        >
-          <div :class="sortIcons[sortBy]" class="w-4 h-4" />
-        </button>
-        <div class="flex-1" />
-        <span v-if="filteredEntries.length !== entries.length" class="text-xs op40">
-          {{ filteredEntries.length }}/{{ entries.length }}
-        </span>
-        <button
-          v-if="hasActiveFilter"
-          class="text-xs op50 hover:op100 px-1.5 py-0.5 hover:bg-active rounded transition flex items-center gap-0.5"
-          title="Reset all filters"
-          @click="resetFilters"
-        >
-          <div class="i-ph:funnel-x-duotone w-3.5 h-3.5" />
-          Reset Filters
-        </button>
-        <div v-if="hasActiveFilter" class="border-l border-base h-4 mx-0.5" />
-        <button
-          v-if="hasActiveFilter && filteredEntries.length > 0"
-          class="text-xs op50 hover:op100 px-1.5 py-0.5 hover:bg-active rounded transition flex items-center gap-0.5"
-          title="Dismiss all matching the current filter"
-          @click="dismissFiltered"
-        >
-          <div class="i-ph:trash-duotone w-3.5 h-3.5" />
-          Dismiss filtered
-        </button>
-        <button
-          v-if="!hasActiveFilter && entries.length > 0"
-          class="text-xs op50 hover:op100 px-1.5 py-0.5 hover:bg-active rounded transition flex items-center gap-0.5"
-          title="Dismiss all messages"
-          @click="clearAll"
-        >
-          <div class="i-ph:trash-duotone w-3.5 h-3.5" />
-          Dismiss all
-        </button>
-      </div>
-
-      <!-- Row 2: Level + source + category + label filters -->
-      <div class="flex flex-wrap items-center gap-1">
-        <FilterToggles
-          label="Level"
-          :items="allLevels"
-          :active="(activeFilters as Set<string>)"
-          :styles="levels"
-          @toggle="toggleFilter"
-        />
-
-        <div class="border-l border-base h-4 mx-0.5" />
+    <MessageFilterBar :filters />
 
-        <FilterToggles
-          label="From"
-          :items="allSources"
-          :active="(activeFromFilters as Set<DevframeMessageEntryFrom>)"
-          :styles="fromEntries"
-          @toggle="(toggleFrom as (item: string) => void)"
-        />
-
-        <template v-if="allCategories.length > 0">
-          <div class="border-l border-base h-4 mx-1" />
-          <FilterToggles
-            label="Category"
-            :items="allCategories"
-            :active="(activeCategories as Set<string>)"
-            :hash-color="getHashColorFromString"
-            @toggle="toggleCategory"
-          />
-        </template>
-
-        <template v-if="allLabels.length > 0">
-          <div class="border-l border-base h-4 mx-1" />
-          <FilterToggles
-            label="Labels"
-            :items="allLabels"
-            :active="(activeLabelFilters as Set<string>)"
-            :hash-color="getHashColorFromString"
-            @toggle="toggleLabelFilter"
-          />
-        </template>
-      </div>
-    </div>
-
-    <!-- Content -->
     <div class="h-full of-hidden" :class="selectedEntry ? 'grid grid-cols-[1fr_1fr]' : ''">
-      <!-- Message list -->
-      <div class="h-full of-y-auto">
-        <div v-if="filteredEntries.length === 0" class="flex items-center justify-center h-full op50 text-sm">
-          No messages
-        </div>
-        <div
-          v-for="entry of filteredEntries"
-          :key="entry.id"
-          :data-selected="selectedId === entry.id || undefined"
-          class="w-full text-left border-b border-base hover:bg-active transition border-l-2 text-sm group cursor-pointer"
-          :class="[
-            selectedId === entry.id ? 'bg-active' : '',
-          ]"
-          @click="selectedId = selectedId === entry.id ? null : entry.id"
-        >
-          <MessageItem :entry class="px-3 py-2.5">
-            <template #actions>
-              <button
-                class="op0 group-hover:op50 hover:op100! p-0.5 rounded hover:bg-active flex-none"
-                title="Dismiss"
-                @click.stop="removeEntry(entry.id)"
-              >
-                <div class="i-ph-trash-duotone w-3 h-3" />
-              </button>
-            </template>
-          </MessageItem>
-        </div>
-      </div>
-
-      <!-- Detail panel -->
-      <div v-if="selectedEntry" class="h-full of-y-auto border-l border-base p-4">
-        <!-- Header -->
-        <div class="flex items-start gap-2 mb-3">
-          <div class="flex-1">
-            <div class="font-medium text-lg">
-              {{ selectedEntry.message }}
-            </div>
-          </div>
-          <!-- Dismiss button -->
-          <button class="op50 hover:op100 p-1" title="Dismiss" @click="removeEntry(selectedEntry!.id)">
-            <div class="i-ph-trash-duotone w-4 h-4" />
-          </button>
-          <!-- Close button -->
-          <button class="op50 hover:op100 p-1" title="Close detail" @click="selectedId = null">
-            <div class="i-ph-x w-4 h-4" />
-          </button>
-        </div>
-
-        <!-- Metadata row -->
-        <div class="flex flex-wrap items-center gap-2 mb-3 text-xs">
-          <span class="flex items-center gap-1" :class="levels[selectedEntry.level].color">
-            <div :class="levels[selectedEntry.level].icon" class="w-3.5 h-3.5" />
-            <span class="capitalize">{{ selectedEntry.level }}</span>
-          </span>
-          <span v-if="fromEntries[selectedEntry.from as DevframeMessageEntryFrom]" class="flex items-center gap-1" :class="fromEntries[selectedEntry.from as DevframeMessageEntryFrom].color">
-            <div :class="fromEntries[selectedEntry.from as DevframeMessageEntryFrom].icon" class="w-3.5 h-3.5" />
-            {{ fromEntries[selectedEntry.from as DevframeMessageEntryFrom].label }}
-          </span>
-          <span v-if="selectedEntry.status === 'loading'" class="flex items-center gap-1 text-amber">
-            <div class="w-3 h-3 border-1.5 border-current border-t-transparent rounded-full animate-spin" />
-            Loading
-          </span>
-          <span class="op40" :title="formatAbsoluteTime(selectedEntry.timestamp)">
-            {{ selectedTimeAgo }}
-          </span>
-          <span v-if="selectedEntry.notify" class="flex items-center gap-0.5 op40">
-            <div class="i-ph:bell-duotone w-3.5 h-3.5" />
-            notify
-          </span>
-        </div>
-
-        <!-- Description -->
-        <div v-if="selectedEntry.description" class="text-sm op80 mb-3 whitespace-pre-wrap">
-          {{ selectedEntry.description }}
-        </div>
-
-        <!-- Category + Labels -->
-        <div v-if="selectedEntry.category || (selectedEntry.labels && selectedEntry.labels.length)" class="flex flex-wrap gap-1 mb-3">
-          <HashBadge v-if="selectedEntry.category" :label="selectedEntry.category" class="cursor-pointer" @click="toggleCategory(selectedEntry.category)" />
-          <HashBadge v-for="label of selectedEntry.labels" :key="label" :label="label" class="cursor-pointer" @click="toggleLabelFilter(label)" />
-        </div>
-
-        <!-- File position -->
-        <button
-          v-if="selectedEntry.filePosition && canOpenFile"
-          class="flex items-start gap-1.5 text-left text-sm text-blue hover:underline mb-3 break-all"
-          @click="openFile(selectedEntry!)"
-        >
-          <div class="i-ph:file-code-duotone w-4 h-4 flex-none mt-0.5" />
-          <span>{{ selectedEntry.filePosition.file }}<template v-if="selectedEntry.filePosition.line">:{{ selectedEntry.filePosition.line }}</template><template v-if="selectedEntry.filePosition.column">:{{ selectedEntry.filePosition.column }}</template></span>
-        </button>
-        <div
-          v-else-if="selectedEntry.filePosition"
-          class="flex items-start gap-1.5 text-sm op60 mb-3 break-all"
-        >
-          <div class="i-ph:file-code-duotone w-4 h-4 flex-none mt-0.5" />
-          <span>{{ selectedEntry.filePosition.file }}<template v-if="selectedEntry.filePosition.line">:{{ selectedEntry.filePosition.line }}</template><template v-if="selectedEntry.filePosition.column">:{{ selectedEntry.filePosition.column }}</template></span>
-        </div>
-
-        <!-- Element position -->
-        <div v-if="selectedEntry.elementPosition" class="text-sm mb-3 bg-gray/5 rounded p-2">
-          <div class="op50 text-xs mb-1">
-            Element
-          </div>
-          <div v-if="selectedEntry.elementPosition.selector" class="font-mono text-xs">
-            {{ selectedEntry.elementPosition.selector }}
-          </div>
-          <div v-if="selectedEntry.elementPosition.description" class="text-xs op70 mt-1">
-            {{ selectedEntry.elementPosition.description }}
-          </div>
-          <div v-if="selectedEntry.elementPosition.boundingBox" class="text-xs op50 mt-1 font-mono">
-            {{ selectedEntry.elementPosition.boundingBox.x }}, {{ selectedEntry.elementPosition.boundingBox.y }}
-            ({{ selectedEntry.elementPosition.boundingBox.width }} × {{ selectedEntry.elementPosition.boundingBox.height }})
-          </div>
-        </div>
-
-        <!-- Stacktrace -->
-        <div v-if="selectedEntry.stacktrace" class="mb-3">
-          <div class="op50 text-xs mb-1">
-            Stack Trace
-          </div>
-          <div class="group relative">
-            <pre class="text-xs bg-gray/5 rounded p-2 of-x-auto whitespace-pre-wrap font-mono">{{ selectedEntry.stacktrace }}</pre>
-            <button
-              class="group/bt absolute top-1.5 right-1.5 op0 group-hover:op100 p-1 rounded bg-base border border-base transition"
-              title="Copy"
-              @click="copyStacktrace(selectedEntry.stacktrace)"
-            >
-              <div
-                :class="stacktraceCopied ? 'i-ph:check' : 'i-ph:copy'"
-                class="op50 group-hover/bt:op100 size-3.5"
-              />
-            </button>
-          </div>
-        </div>
-
-        <!-- Timers -->
-        <div v-if="selectedEntry.autoDismiss || selectedEntry.autoDelete" class="flex flex-wrap gap-3 mb-3 text-xs op50">
-          <span v-if="selectedEntry.autoDismiss" class="flex items-center gap-1">
-            <div class="i-ph:bell-slash-duotone w-3.5 h-3.5" />
-            Auto-dismiss: {{ selectedEntry.autoDismiss / 1000 }}s
-          </span>
-          <span v-if="selectedEntry.autoDelete" class="flex items-center gap-1">
-            <div class="i-ph:timer-duotone w-3.5 h-3.5" />
-            Auto-delete: {{ selectedEntry.autoDelete / 1000 }}s
-          </span>
-        </div>
-
-        <!-- ID + Timestamp -->
-        <div class="flex flex-col gap-1 mb-3 text-xs op40 font-mono border-t border-base pt-3">
-          <span>ID: {{ selectedEntry.id }}</span>
-          <span>{{ formatAbsoluteTime(selectedEntry.timestamp) }} ({{ new Date(selectedEntry.timestamp).toLocaleDateString() }})</span>
-        </div>
-      </div>
+      <MessageList
+        :entries="filters.filteredEntries"
+        :selected-id="selectedId"
+        @select="toggleSelect"
+        @dismiss="removeEntry"
+      />
+
+      <MessageDetail
+        v-if="selectedEntry"
+        :entry="selectedEntry"
+        :can-open-file="canOpenFile"
+        @close="selectedId = null"
+        @dismiss="removeEntry"
+        @open-file="emit('openFile', $event)"
+        @toggle-category="filters.toggleCategory"
+        @toggle-label="filters.toggleLabel"
+      />
     </div>
   </div>
 </template>
diff --git a/plugins/messages/src/client/components/_fixtures.ts b/plugins/messages/src/client/components/_fixtures.ts
index 96799490..0f3e92ec 100644
--- a/plugins/messages/src/client/components/_fixtures.ts
+++ b/plugins/messages/src/client/components/_fixtures.ts
@@ -1,4 +1,4 @@
-import type { DevframeMessageEntry } from '../../types'
+import type { DevframeMessageEntry } from '@devframes/hub/types'
 
 /** Shared story fixtures — a feed that exercises every entry facet. */
 export function makeSampleEntries(now: number = Date.now()): DevframeMessageEntry[] {
diff --git a/plugins/messages/src/client/components/MessageItemConstants.ts b/plugins/messages/src/client/components/message-styles.ts
similarity index 75%
rename from plugins/messages/src/client/components/MessageItemConstants.ts
rename to plugins/messages/src/client/components/message-styles.ts
index f56d60af..3ddebc3b 100644
--- a/plugins/messages/src/client/components/MessageItemConstants.ts
+++ b/plugins/messages/src/client/components/message-styles.ts
@@ -1,4 +1,4 @@
-import type { DevframeMessageEntryFrom, DevframeMessageLevel } from '../../types'
+import type { DevframeMessageEntryFrom, DevframeMessageLevel } from '@devframes/hub/types'
 
 // @unocss-include
 
@@ -36,15 +36,3 @@ export const levelPriority: Record<DevframeMessageLevel, number> = {
   success: 3,
   debug: 4,
 }
-
-/**
- * Deterministic hue from a string, for category/label badges. Fixed
- * saturation/lightness reads acceptably on both schemes.
- */
-export function getHashColorFromString(name: string, opacity: number = 1): string {
-  let hash = 0
-  for (let i = 0; i < name.length; i++)
-    hash = name.charCodeAt(i) + ((hash << 5) - hash)
-  const h = hash % 360
-  return `hsla(${h}, 55%, 55%, ${opacity})`
-}
diff --git a/plugins/messages/src/client/composables/useMessageFilters.ts b/plugins/messages/src/client/composables/useMessageFilters.ts
new file mode 100644
index 00000000..f2a9bdd3
--- /dev/null
+++ b/plugins/messages/src/client/composables/useMessageFilters.ts
@@ -0,0 +1,174 @@
+import type { DevframeMessageEntry, DevframeMessageEntryFrom, DevframeMessageLevel } from '@devframes/hub/types'
+import type { MaybeRefOrGetter } from 'vue'
+import { computed, reactive, ref, toValue } from 'vue'
+import { fromEntries, levelPriority, levels } from '../components/message-styles'
+
+export type SortMode = 'newest' | 'oldest' | 'level'
+
+const SORT_MODES: SortMode[] = ['newest', 'oldest', 'level']
+
+const SORT_LABELS: Record<SortMode, string> = {
+  newest: 'Newest first',
+  oldest: 'Oldest first',
+  level: 'By severity',
+}
+
+const SORT_ICONS: Record<SortMode, string> = {
+  newest: 'i-ph:sort-descending-duotone',
+  oldest: 'i-ph:sort-ascending-duotone',
+  level: 'i-ph:warning-diamond-duotone',
+}
+
+/**
+ * The reactive search / sort / filter state over a message feed, plus the
+ * derived `filteredEntries`. Instantiated once in the smart wrapper (`App.vue`)
+ * so the nav bar's search + actions and the body's filter bar share a single
+ * source of truth. Returned as a `reactive` façade so its refs auto-unwrap in
+ * templates and can be threaded through as one prop.
+ */
+export interface MessageFilters {
+  search: string
+  sortBy: SortMode
+  /** Human label for the active sort mode (tooltip). */
+  readonly sortLabel: string
+  /** Phosphor icon class for the active sort mode. */
+  readonly sortIcon: string
+  cycleSortMode: () => void
+
+  activeLevels: Set<DevframeMessageLevel>
+  activeSources: Set<DevframeMessageEntryFrom>
+  activeCategories: Set<string>
+  activeLabels: Set<string>
+  toggleLevel: (level: string) => void
+  toggleSource: (from: DevframeMessageEntryFrom) => void
+  toggleCategory: (category: string) => void
+  toggleLabel: (label: string) => void
+
+  readonly allLevels: DevframeMessageLevel[]
+  readonly allSources: DevframeMessageEntryFrom[]
+  readonly allCategories: string[]
+  readonly allLabels: string[]
+
+  readonly hasActiveFilter: boolean
+  resetFilters: () => void
+
+  /** Every entry, unfiltered (for resolving a still-selected entry). */
+  readonly allEntries: DevframeMessageEntry[]
+  /** Entries matching the current filters, in the active sort order. */
+  readonly filteredEntries: DevframeMessageEntry[]
+  readonly totalCount: number
+  readonly filteredCount: number
+}
+
+export function useMessageFilters(source: MaybeRefOrGetter<DevframeMessageEntry[]>): MessageFilters {
+  const search = ref('')
+  const sortBy = ref<SortMode>('newest')
+  const activeLevels = ref(new Set<DevframeMessageLevel>())
+  const activeSources = ref(new Set<DevframeMessageEntryFrom>())
+  const activeCategories = ref(new Set<string>())
+  const activeLabels = ref(new Set<string>())
+
+  const allEntries = computed(() => toValue(source))
+
+  function cycleSortMode(): void {
+    const idx = SORT_MODES.indexOf(sortBy.value)
+    sortBy.value = SORT_MODES[(idx + 1) % SORT_MODES.length]!
+  }
+
+  function toggle<T>(set: Set<T>, value: T): void {
+    if (set.has(value))
+      set.delete(value)
+    else
+      set.add(value)
+  }
+
+  const allLabels = computed(() => {
+    const labels = new Set<string>()
+    for (const entry of allEntries.value) {
+      for (const label of entry.labels ?? [])
+        labels.add(label)
+    }
+    return Array.from(labels).sort()
+  })
+
+  const allCategories = computed(() => {
+    const cats = new Set<string>()
+    for (const entry of allEntries.value) {
+      if (entry.category)
+        cats.add(entry.category)
+    }
+    return Array.from(cats).sort()
+  })
+
+  const hasActiveFilter = computed(() =>
+    activeLevels.value.size > 0
+    || activeSources.value.size > 0
+    || activeCategories.value.size > 0
+    || activeLabels.value.size > 0
+    || search.value.length > 0)
+
+  function resetFilters(): void {
+    activeLevels.value.clear()
+    activeSources.value.clear()
+    activeCategories.value.clear()
+    activeLabels.value.clear()
+    search.value = ''
+  }
+
+  const filteredEntries = computed<DevframeMessageEntry[]>(() => {
+    let entries = allEntries.value
+    if (activeLevels.value.size > 0)
+      entries = entries.filter(e => activeLevels.value.has(e.level))
+    if (activeSources.value.size > 0)
+      entries = entries.filter(e => activeSources.value.has(e.from as DevframeMessageEntryFrom))
+    if (activeCategories.value.size > 0)
+      entries = entries.filter(e => e.category != null && activeCategories.value.has(e.category))
+    if (activeLabels.value.size > 0)
+      entries = entries.filter(e => e.labels?.some(l => activeLabels.value.has(l)))
+    if (search.value) {
+      const q = search.value.toLowerCase()
+      entries = entries.filter(e =>
+        e.message.toLowerCase().includes(q)
+        || e.description?.toLowerCase().includes(q)
+        || e.from?.toLowerCase().includes(q)
+        || e.category?.toLowerCase().includes(q)
+        || e.labels?.some(l => l.toLowerCase().includes(q)))
+    }
+
+    if (sortBy.value === 'oldest')
+      return [...entries]
+    if (sortBy.value === 'level')
+      return entries.toSorted((a, b) => levelPriority[a.level] - levelPriority[b.level])
+    return entries.toReversed()
+  })
+
+  return reactive({
+    search,
+    sortBy,
+    sortLabel: computed(() => SORT_LABELS[sortBy.value]),
+    sortIcon: computed(() => SORT_ICONS[sortBy.value]),
+    cycleSortMode,
+
+    activeLevels,
+    activeSources,
+    activeCategories,
+    activeLabels,
+    toggleLevel: (level: string) => toggle(activeLevels.value, level as DevframeMessageLevel),
+    toggleSource: (from: DevframeMessageEntryFrom) => toggle(activeSources.value, from),
+    toggleCategory: (category: string) => toggle(activeCategories.value, category),
+    toggleLabel: (label: string) => toggle(activeLabels.value, label),
+
+    allLevels: Object.keys(levels) as DevframeMessageLevel[],
+    allSources: Object.keys(fromEntries) as DevframeMessageEntryFrom[],
+    allCategories,
+    allLabels,
+
+    hasActiveFilter,
+    resetFilters,
+
+    allEntries,
+    filteredEntries,
+    totalCount: computed(() => allEntries.value.length),
+    filteredCount: computed(() => filteredEntries.value.length),
+  }) as MessageFilters
+}
diff --git a/plugins/messages/src/client/index.ts b/plugins/messages/src/client/index.ts
index 3942ca0b..068dc30d 100644
--- a/plugins/messages/src/client/index.ts
+++ b/plugins/messages/src/client/index.ts
@@ -4,6 +4,7 @@ import { createApp } from 'vue'
 import App from './App.vue'
 
 import 'virtual:uno.css'
+import 'floating-vue/dist/style.css'
 import '@antfu/design/styles.css'
 import './style.css'
 
@@ -51,12 +52,12 @@ export async function mountMessages(
   }
 }
 
+export { useMessages } from './state/messages'
+export type { MessagesState } from './state/messages'
 export type {
   DevframeMessageEntry,
   DevframeMessageEntryFrom,
   DevframeMessageEntryInput,
   DevframeMessageLevel,
   DevframeMessagesListDelta,
-} from '../types'
-export { useMessages } from './state/messages'
-export type { MessagesState } from './state/messages'
+} from '@devframes/hub/types'
diff --git a/plugins/messages/src/client/state/messages.ts b/plugins/messages/src/client/state/messages.ts
index 968dbf15..990ea78c 100644
--- a/plugins/messages/src/client/state/messages.ts
+++ b/plugins/messages/src/client/state/messages.ts
@@ -1,6 +1,6 @@
+import type { DevframeMessageEntry, DevframeMessagesListDelta } from '@devframes/hub/types'
 import type { DevframeRpcClient } from 'devframe/client'
 import type { Reactive } from 'vue'
-import type { DevframeMessageEntry, DevframeMessagesListDelta } from '../../types'
 import { reactive } from 'vue'
 import { MESSAGES_UPDATED_EVENT } from '../../constants'
 
diff --git a/plugins/messages/src/index.ts b/plugins/messages/src/index.ts
index ca8a5768..981730ed 100644
--- a/plugins/messages/src/index.ts
+++ b/plugins/messages/src/index.ts
@@ -79,10 +79,12 @@ const messagesDevframe: DevframeDefinition = createMessagesDevframe()
 
 export default messagesDevframe
 export { DEFAULT_PORT, MESSAGES_UPDATED_EVENT, PLUGIN_ID } from './constants'
+// 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 {
   DevframeMessageEntry,
   DevframeMessageEntryFrom,
   DevframeMessageEntryInput,
   DevframeMessageLevel,
   DevframeMessagesListDelta,
-} from './types'
+} from '@devframes/hub/types'
diff --git a/plugins/messages/src/rpc/functions/add.ts b/plugins/messages/src/rpc/functions/add.ts
index aa9ffcd1..10dbe6cb 100644
--- a/plugins/messages/src/rpc/functions/add.ts
+++ b/plugins/messages/src/rpc/functions/add.ts
@@ -1,4 +1,4 @@
-import type { DevframeMessageEntry, DevframeMessageEntryInput } from '../../types'
+import type { DevframeMessageEntry, DevframeMessageEntryInput } from '@devframes/hub/types'
 import { defineMessagesRpc, getMessagesHost } from './_define'
 
 /**
diff --git a/plugins/messages/src/rpc/functions/list.ts b/plugins/messages/src/rpc/functions/list.ts
index bd21e396..28c02e7a 100644
--- a/plugins/messages/src/rpc/functions/list.ts
+++ b/plugins/messages/src/rpc/functions/list.ts
@@ -1,4 +1,4 @@
-import type { DevframeMessagesListDelta } from '../../types'
+import type { DevframeMessagesListDelta } from '@devframes/hub/types'
 import { defineMessagesRpc, getMessagesHost } from './_define'
 
 /**
diff --git a/plugins/messages/src/rpc/functions/update.ts b/plugins/messages/src/rpc/functions/update.ts
index 467b1408..289e0c11 100644
--- a/plugins/messages/src/rpc/functions/update.ts
+++ b/plugins/messages/src/rpc/functions/update.ts
@@ -1,4 +1,4 @@
-import type { DevframeMessageEntry, DevframeMessageEntryInput } from '../../types'
+import type { DevframeMessageEntry, DevframeMessageEntryInput } from '@devframes/hub/types'
 import { defineMessagesRpc, getMessagesHost } from './_define'
 
 /**
diff --git a/plugins/messages/src/types.ts b/plugins/messages/src/types.ts
deleted file mode 100644
index 64121b55..00000000
--- a/plugins/messages/src/types.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-// 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 {
-  DevframeMessageEntry,
-  DevframeMessageEntryFrom,
-  DevframeMessageEntryInput,
-  DevframeMessageLevel,
-  DevframeMessagesListDelta,
-} from '@devframes/hub/types'
diff --git a/plugins/messages/tsdown.config.ts b/plugins/messages/tsdown.config.ts
index 68f05709..f41c21c0 100644
--- a/plugins/messages/tsdown.config.ts
+++ b/plugins/messages/tsdown.config.ts
@@ -16,7 +16,6 @@ const serverEntries = {
   'cli': 'src/cli.ts',
   'vite': 'src/vite.ts',
   'constants': 'src/constants.ts',
-  'types': 'src/types.ts',
   'node/index': 'src/node/index.ts',
   'rpc/index': 'src/rpc/index.ts',
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 176daa13..bb898420 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -1368,6 +1368,9 @@ importers:
       devframe:
         specifier: workspace:*
         version: link:../../packages/devframe
+      floating-vue:
+        specifier: catalog:frontend
+        version: 5.2.2(vue@3.5.40(typescript@6.0.3))
       get-port-please:
         specifier: catalog:deps
         version: 3.2.0
diff --git a/tests/__snapshots__/tsnapi/@devframes/plugin-messages/types.snapshot.d.ts b/tests/__snapshots__/tsnapi/@devframes/plugin-messages/types.snapshot.d.ts
deleted file mode 100644
index a412b924..00000000
--- a/tests/__snapshots__/tsnapi/@devframes/plugin-messages/types.snapshot.d.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-/**
- * Generated by tsnapi — public API snapshot of `@devframes/plugin-messages/types`
- */
-// #region Other
-export { DevframeMessageEntry }
-export { DevframeMessageEntryFrom }
-export { DevframeMessageEntryInput }
-export { DevframeMessageLevel }
-export { DevframeMessagesListDelta }
-// #endregion
\ No newline at end of file
diff --git a/tests/__snapshots__/tsnapi/@devframes/plugin-messages/types.snapshot.js b/tests/__snapshots__/tsnapi/@devframes/plugin-messages/types.snapshot.js
deleted file mode 100644
index c8f90a37..00000000
--- a/tests/__snapshots__/tsnapi/@devframes/plugin-messages/types.snapshot.js
+++ /dev/null
@@ -1,4 +0,0 @@
-/**
- * Generated by tsnapi — public API snapshot of `@devframes/plugin-messages/types`
- */
-/* no exports */
\ No newline at end of file
diff --git a/tsconfig.base.json b/tsconfig.base.json
index 78f90a2c..1ea46c79 100644
--- a/tsconfig.base.json
+++ b/tsconfig.base.json
@@ -289,9 +289,6 @@
       "@devframes/plugin-messages/constants": [
         "./plugins/messages/src/constants.ts"
       ],
-      "@devframes/plugin-messages/types": [
-        "./plugins/messages/src/types.ts"
-      ],
       "@devframes/plugin-messages/rpc": [
         "./plugins/messages/src/rpc/index.ts"
       ],

From 147b39a1add6f197b1300b50923ba74ecb41f50f Mon Sep 17 00:00:00 2001
From: Anthony Fu <github@antfu.me>
Date: Fri, 24 Jul 2026 16:37:30 +0900
Subject: [PATCH 2/4] chore: update styles

---
 plugins/messages/src/client/App.vue           | 25 +++++++++++++------
 .../src/client/components/FilterToggles.vue   |  4 +--
 .../components/MessageToolbarActions.vue      | 10 --------
 .../src/client/components/message-styles.ts   | 14 +++++------
 4 files changed, 27 insertions(+), 26 deletions(-)

diff --git a/plugins/messages/src/client/App.vue b/plugins/messages/src/client/App.vue
index 6a88535c..91c104e4 100644
--- a/plugins/messages/src/client/App.vue
+++ b/plugins/messages/src/client/App.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import type { DevframeMessageEntry } from '@devframes/hub/types'
 import type { DevframeConnectionStatus, DevframeRpcClient } from 'devframe/client'
+import DisplayBadge from '@antfu/design/components/Display/DisplayBadge.vue'
 import FormSearchField from '@antfu/design/components/Form/FormSearchField.vue'
 import LayoutToolbar from '@antfu/design/components/Layout/LayoutToolbar.vue'
 import { computed, onBeforeUnmount, ref } from 'vue'
@@ -92,13 +93,23 @@ async function onOpenFile(entry: DevframeMessageEntry): Promise<void> {
       </div>
 
       <template #search>
-        <FormSearchField
-          v-if="!connState"
-          v-model="filters.search"
-          size="sm"
-          placeholder="Search messages…"
-          class="max-w-64"
-        />
+        <div class="flex gap-2 items-center">
+          <FormSearchField
+            v-if="!connState"
+            v-model="filters.search"
+            size="sm"
+            placeholder="Search messages…"
+            class="max-w-64"
+          />
+          <DisplayBadge v-if="filters.totalCount > 0" :color="false" class="text-xs font-mono">
+            <template v-if="filters.filteredCount !== filters.totalCount">
+              {{ filters.filteredCount }}/{{ filters.totalCount }}
+            </template>
+            <template v-else>
+              {{ filters.totalCount }}
+            </template>
+          </DisplayBadge>
+        </div>
       </template>
 
       <template #end>
diff --git a/plugins/messages/src/client/components/FilterToggles.vue b/plugins/messages/src/client/components/FilterToggles.vue
index 09f0963d..8a86eab8 100644
--- a/plugins/messages/src/client/components/FilterToggles.vue
+++ b/plugins/messages/src/client/components/FilterToggles.vue
@@ -27,11 +27,11 @@ function isDimmed(active: Set<string>, item: string): boolean {
       v-for="item of items"
       :key="item"
       type="button"
-      class="rounded flex items-center transition hover:bg-active"
+      class="rounded flex items-center transition"
       :class="[
         badge ? 'p-0.5' : 'px-1.5 py-0.5 gap-0.5 text-xs',
         !badge && !isDimmed(active, item) ? (styles?.[item]?.color || '') : '',
-        isDimmed(active, item) ? 'op30' : '',
+        isDimmed(active, item) ? 'op30 saturate-50' : '',
       ]"
       @click="$emit('toggle', item)"
     >
diff --git a/plugins/messages/src/client/components/MessageToolbarActions.vue b/plugins/messages/src/client/components/MessageToolbarActions.vue
index b9ab18bc..7ece7281 100644
--- a/plugins/messages/src/client/components/MessageToolbarActions.vue
+++ b/plugins/messages/src/client/components/MessageToolbarActions.vue
@@ -2,7 +2,6 @@
 import type { MessageFilters } from '../composables/useMessageFilters'
 import ActionButton from '@antfu/design/components/Action/ActionButton.vue'
 import ActionIconButton from '@antfu/design/components/Action/ActionIconButton.vue'
-import DisplayBadge from '@antfu/design/components/Display/DisplayBadge.vue'
 import LayoutSeparator from '@antfu/design/components/Layout/LayoutSeparator.vue'
 
 const props = defineProps<{
@@ -28,15 +27,6 @@ const { filters } = props
     @click="filters.cycleSortMode"
   />
 
-  <DisplayBadge v-if="filters.totalCount > 0" :color="false" class="text-xs font-mono">
-    <template v-if="filters.filteredCount !== filters.totalCount">
-      {{ filters.filteredCount }}/{{ filters.totalCount }}
-    </template>
-    <template v-else>
-      {{ filters.totalCount }}
-    </template>
-  </DisplayBadge>
-
   <template v-if="filters.hasActiveFilter">
     <ActionButton
       variant="text"
diff --git a/plugins/messages/src/client/components/message-styles.ts b/plugins/messages/src/client/components/message-styles.ts
index 3ddebc3b..5e66c34a 100644
--- a/plugins/messages/src/client/components/message-styles.ts
+++ b/plugins/messages/src/client/components/message-styles.ts
@@ -16,16 +16,16 @@ export interface FromStyle {
 }
 
 export const levels: Record<DevframeMessageLevel, LevelStyle> = {
-  info: { icon: 'i-ph:info-duotone', color: 'text-blue', bg: 'bg-blue', label: 'Info' },
-  warn: { icon: 'i-ph:warning-duotone', color: 'text-amber', bg: 'bg-amber', label: 'Warning' },
-  error: { icon: 'i-ph:x-circle-duotone', color: 'text-red', bg: 'bg-red', label: 'Error' },
-  success: { icon: 'i-ph:check-circle-duotone', color: 'text-green', bg: 'bg-green', label: 'Success' },
-  debug: { icon: 'i-ph:bug-duotone', color: 'text-gray', bg: 'bg-gray', label: 'Debug' },
+  info: { icon: 'i-ph:info-duotone', color: 'dark:text-blue-200 text-blue-600', bg: 'bg-blue', label: 'Info' },
+  warn: { icon: 'i-ph:warning-duotone', color: 'dark:text-amber-200 text-amber-600', bg: 'bg-amber', label: 'Warning' },
+  error: { icon: 'i-ph:x-circle-duotone', color: 'dark:text-red-200 text-red-600', bg: 'bg-red', label: 'Error' },
+  success: { icon: 'i-ph:check-circle-duotone', color: 'dark:text-green-200 text-green-600', bg: 'bg-green', label: 'Success' },
+  debug: { icon: 'i-ph:bug-duotone', color: 'dark:text-gray-200 text-gray-600', bg: 'bg-gray', label: 'Debug' },
 }
 
 export const fromEntries: Record<DevframeMessageEntryFrom, FromStyle> = {
-  server: { icon: 'i-ph:hexagon-duotone', color: 'text-green-800 dark:text-green-200', label: 'Server' },
-  browser: { icon: 'i-ph:globe-simple-duotone', color: 'text-amber-800 dark:text-amber-200', label: 'Browser' },
+  server: { icon: 'i-ph:hexagon-duotone', color: 'text-green-600 dark:text-green-200', label: 'Server' },
+  browser: { icon: 'i-ph:globe-simple-duotone', color: 'text-amber-600 dark:text-amber-200', label: 'Browser' },
 }
 
 /** Ordering used by the "By severity" sort mode. */

From a871a9fc24df3ade9a36edec4b9ba140e87acfb2 Mon Sep 17 00:00:00 2001
From: "Anthony Fu (via agent)" <reg-github-bot@antfu.me>
Date: Fri, 24 Jul 2026 07:42:47 +0000
Subject: [PATCH 3/4] feat(messages): distinguish category and label tags (left
 border vs pill)

---
 .../components/FilterToggles.stories.ts       | 13 +++++++++--
 .../src/client/components/FilterToggles.vue   | 14 +++++------
 .../src/client/components/MessageDetail.vue   |  6 ++---
 .../client/components/MessageFilterBar.vue    |  4 ++--
 .../src/client/components/MessageItem.vue     |  6 ++---
 .../src/client/components/MessageTag.vue      | 23 +++++++++++++++++++
 6 files changed, 49 insertions(+), 17 deletions(-)
 create mode 100644 plugins/messages/src/client/components/MessageTag.vue

diff --git a/plugins/messages/src/client/components/FilterToggles.stories.ts b/plugins/messages/src/client/components/FilterToggles.stories.ts
index 84528b6d..248dd652 100644
--- a/plugins/messages/src/client/components/FilterToggles.stories.ts
+++ b/plugins/messages/src/client/components/FilterToggles.stories.ts
@@ -32,11 +32,20 @@ export const LevelsFiltered: Story = {
   },
 }
 
-export const BadgeColored: Story = {
+export const CategoryTags: Story = {
   args: {
     label: 'Category',
     items: ['a11y', 'lint', 'runtime', 'build'],
     active: new Set<string>(),
-    badge: true,
+    tag: 'category',
+  },
+}
+
+export const LabelTags: Story = {
+  args: {
+    label: 'Labels',
+    items: ['axe', 'eslint', 'vite', 'hmr'],
+    active: new Set<string>(),
+    tag: 'label',
   },
 }
diff --git a/plugins/messages/src/client/components/FilterToggles.vue b/plugins/messages/src/client/components/FilterToggles.vue
index 8a86eab8..4f461ff8 100644
--- a/plugins/messages/src/client/components/FilterToggles.vue
+++ b/plugins/messages/src/client/components/FilterToggles.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import DisplayBadge from '@antfu/design/components/Display/DisplayBadge.vue'
+import MessageTag from './MessageTag.vue'
 
 defineProps<{
   label: string
@@ -7,8 +7,8 @@ defineProps<{
   active: Set<string>
   /** Map item key → { icon, color, label } for styled (level/source) items. */
   styles?: Record<string, { icon?: string, color?: string, label?: string }>
-  /** Render items as hash-colored `DisplayBadge` chips (category/label). */
-  badge?: boolean
+  /** Render items as hash-colored `MessageTag` chips of this kind (category/label). */
+  tag?: 'category' | 'label'
 }>()
 
 defineEmits<{
@@ -29,14 +29,14 @@ function isDimmed(active: Set<string>, item: string): boolean {
       type="button"
       class="rounded flex items-center transition"
       :class="[
-        badge ? 'p-0.5' : 'px-1.5 py-0.5 gap-0.5 text-xs',
-        !badge && !isDimmed(active, item) ? (styles?.[item]?.color || '') : '',
+        tag ? 'p-0.5' : 'px-1.5 py-0.5 gap-0.5 text-xs',
+        !tag && !isDimmed(active, item) ? (styles?.[item]?.color || '') : '',
         isDimmed(active, item) ? 'op30 saturate-50' : '',
       ]"
       @click="$emit('toggle', item)"
     >
-      <template v-if="badge">
-        <DisplayBadge :text="item" class="text-xs" />
+      <template v-if="tag">
+        <MessageTag :text="item" :kind="tag" />
       </template>
       <template v-else>
         <div v-if="styles?.[item]?.icon" :class="styles[item]!.icon" class="w-3.5 h-3.5" />
diff --git a/plugins/messages/src/client/components/MessageDetail.vue b/plugins/messages/src/client/components/MessageDetail.vue
index e07ae349..056dc691 100644
--- a/plugins/messages/src/client/components/MessageDetail.vue
+++ b/plugins/messages/src/client/components/MessageDetail.vue
@@ -1,12 +1,12 @@
 <script setup lang="ts">
 import type { DevframeMessageEntry, DevframeMessageEntryFrom } from '@devframes/hub/types'
 import ActionIconButton from '@antfu/design/components/Action/ActionIconButton.vue'
-import DisplayBadge from '@antfu/design/components/Display/DisplayBadge.vue'
 import FeedbackSpinner from '@antfu/design/components/Feedback/FeedbackSpinner.vue'
 import LayoutSeparator from '@antfu/design/components/Layout/LayoutSeparator.vue'
 import { useClipboard, useTimeAgo } from '@vueuse/core'
 import { computed } from 'vue'
 import { fromEntries, levels } from './message-styles'
+import MessageTag from './MessageTag.vue'
 
 const props = defineProps<{
   entry: DevframeMessageEntry
@@ -92,8 +92,8 @@ function filePositionLabel(pos: NonNullable<DevframeMessageEntry['filePosition']
 
     <!-- Category + Labels -->
     <div v-if="entry.category || entry.labels?.length" class="flex flex-wrap gap-1 mb-3">
-      <DisplayBadge v-if="entry.category" :text="entry.category" as="button" class="text-xs cursor-pointer" @click="emit('toggleCategory', entry.category)" />
-      <DisplayBadge v-for="label of entry.labels" :key="label" :text="label" as="button" class="text-xs cursor-pointer" @click="emit('toggleLabel', label)" />
+      <MessageTag v-if="entry.category" :text="entry.category" kind="category" as="button" class="cursor-pointer" @click="emit('toggleCategory', entry.category)" />
+      <MessageTag v-for="label of entry.labels" :key="label" :text="label" kind="label" as="button" class="cursor-pointer" @click="emit('toggleLabel', label)" />
     </div>
 
     <!-- File position -->
diff --git a/plugins/messages/src/client/components/MessageFilterBar.vue b/plugins/messages/src/client/components/MessageFilterBar.vue
index 7baa5d02..f16ec638 100644
--- a/plugins/messages/src/client/components/MessageFilterBar.vue
+++ b/plugins/messages/src/client/components/MessageFilterBar.vue
@@ -38,7 +38,7 @@ const { filters } = props
         label="Category"
         :items="filters.allCategories"
         :active="(filters.activeCategories as Set<string>)"
-        badge
+        tag="category"
         @toggle="filters.toggleCategory"
       />
     </template>
@@ -49,7 +49,7 @@ const { filters } = props
         label="Labels"
         :items="filters.allLabels"
         :active="(filters.activeLabels as Set<string>)"
-        badge
+        tag="label"
         @toggle="filters.toggleLabel"
       />
     </template>
diff --git a/plugins/messages/src/client/components/MessageItem.vue b/plugins/messages/src/client/components/MessageItem.vue
index 95f5a826..2ddfd497 100644
--- a/plugins/messages/src/client/components/MessageItem.vue
+++ b/plugins/messages/src/client/components/MessageItem.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import type { DevframeMessageEntry } from '@devframes/hub/types'
-import DisplayBadge from '@antfu/design/components/Display/DisplayBadge.vue'
 import FeedbackSpinner from '@antfu/design/components/Feedback/FeedbackSpinner.vue'
 import { useTimeAgo } from '@vueuse/core'
 import { levels } from './message-styles'
+import MessageTag from './MessageTag.vue'
 
 const props = defineProps<{
   entry: DevframeMessageEntry
@@ -40,8 +40,8 @@ const timeAgo = useTimeAgo(() => props.entry.timestamp)
         {{ entry.description }}
       </div>
       <div v-if="!compact && (entry.category || entry.labels?.length)" class="flex flex-wrap items-center gap-1">
-        <DisplayBadge v-if="entry.category" :text="entry.category" class="text-xs" />
-        <DisplayBadge v-for="label of entry.labels" :key="label" :text="label" class="text-xs" />
+        <MessageTag v-if="entry.category" :text="entry.category" kind="category" />
+        <MessageTag v-for="label of entry.labels" :key="label" :text="label" kind="label" />
       </div>
     </div>
   </div>
diff --git a/plugins/messages/src/client/components/MessageTag.vue b/plugins/messages/src/client/components/MessageTag.vue
new file mode 100644
index 00000000..3b056661
--- /dev/null
+++ b/plugins/messages/src/client/components/MessageTag.vue
@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import DisplayBadge from '@antfu/design/components/Display/DisplayBadge.vue'
+
+// A hash-colored chip for an entry's category/label, distinguished by kind so
+// the two read apart at a glance: a `category` keeps a thicker left border,
+// a `label` renders as a rounded pill.
+defineProps<{
+  text: string
+  kind: 'category' | 'label'
+  /** Render as another element (e.g. `button` for a clickable filter chip). */
+  as?: string
+}>()
+</script>
+
+<template>
+  <DisplayBadge
+    :text="text"
+    :as="as"
+    :rounded="kind === 'label' ? 'full' : 'md'"
+    class="text-xs"
+    :class="kind === 'category' ? 'border-l-2!' : ''"
+  />
+</template>

From f68ef3f0328c58dc0d5f2478885821dbd82092f7 Mon Sep 17 00:00:00 2001
From: Anthony Fu <github@antfu.me>
Date: Fri, 24 Jul 2026 16:56:02 +0900
Subject: [PATCH 4/4] chore: update

---
 plugins/messages/src/client/components/FilterToggles.vue | 2 +-
 plugins/messages/src/client/components/MessageTag.vue    | 4 ++--
 plugins/messages/src/client/components/message-styles.ts | 2 +-
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/plugins/messages/src/client/components/FilterToggles.vue b/plugins/messages/src/client/components/FilterToggles.vue
index 4f461ff8..33674f06 100644
--- a/plugins/messages/src/client/components/FilterToggles.vue
+++ b/plugins/messages/src/client/components/FilterToggles.vue
@@ -31,7 +31,7 @@ function isDimmed(active: Set<string>, item: string): boolean {
       :class="[
         tag ? 'p-0.5' : 'px-1.5 py-0.5 gap-0.5 text-xs',
         !tag && !isDimmed(active, item) ? (styles?.[item]?.color || '') : '',
-        isDimmed(active, item) ? 'op30 saturate-50' : '',
+        isDimmed(active, item) ? 'op50 saturate-10 hover:op85 hover:saturate-50' : 'op85 hover:op100',
       ]"
       @click="$emit('toggle', item)"
     >
diff --git a/plugins/messages/src/client/components/MessageTag.vue b/plugins/messages/src/client/components/MessageTag.vue
index 3b056661..e5511387 100644
--- a/plugins/messages/src/client/components/MessageTag.vue
+++ b/plugins/messages/src/client/components/MessageTag.vue
@@ -16,8 +16,8 @@ defineProps<{
   <DisplayBadge
     :text="text"
     :as="as"
-    :rounded="kind === 'label' ? 'full' : 'md'"
+    :rounded="kind === 'label' ? 'full' : kind === 'category' ? 0.4 : 'md'"
     class="text-xs"
-    :class="kind === 'category' ? 'border-l-2!' : ''"
+    :class="kind === 'category' ? 'border-l-3!' : ''"
   />
 </template>
diff --git a/plugins/messages/src/client/components/message-styles.ts b/plugins/messages/src/client/components/message-styles.ts
index 5e66c34a..619650a7 100644
--- a/plugins/messages/src/client/components/message-styles.ts
+++ b/plugins/messages/src/client/components/message-styles.ts
@@ -20,7 +20,7 @@ export const levels: Record<DevframeMessageLevel, LevelStyle> = {
   warn: { icon: 'i-ph:warning-duotone', color: 'dark:text-amber-200 text-amber-600', bg: 'bg-amber', label: 'Warning' },
   error: { icon: 'i-ph:x-circle-duotone', color: 'dark:text-red-200 text-red-600', bg: 'bg-red', label: 'Error' },
   success: { icon: 'i-ph:check-circle-duotone', color: 'dark:text-green-200 text-green-600', bg: 'bg-green', label: 'Success' },
-  debug: { icon: 'i-ph:bug-duotone', color: 'dark:text-gray-200 text-gray-600', bg: 'bg-gray', label: 'Debug' },
+  debug: { icon: 'i-ph:bug-duotone', color: 'dark:text-violet-200 text-violet-600', bg: 'bg-violet', label: 'Debug' },
 }
 
 export const fromEntries: Record<DevframeMessageEntryFrom, FromStyle> = {