feat(ui): V2 Design-Fundament — UI-Komponenten konsolidieren und tokenisieren

## Neue wiederverwendbare Komponenten in components/ui/:
- StatusDot.vue — Animierte Status-Punkte (work/think/idle/block/queue)
- PageHeading.vue — Standardisierter Gradient-Seiten-Header
- EmptyState.vue — Shared Empty-State mit Icon/Title/Description/Action
- ActivityTimeline.vue — Wiederverwendbarer Aktivitäts-Feed
- SectionHeader.vue — Spalten-/Sektions-Header (dot + label + count)

## Token-Konformität hergestellt:
- Badge.vue: +12 nexus-token-basierte Varianten (work/think/blocked/queue/done/review/iris/bao/agent/priority*)
- Card.vue: glass-panel/raised/subtle Varianten via nexus-tokens.css
- button/index.ts: +gradient, +icon, +ghostSubtle, +danger Varianten
- nexus-tokens.css: Buttons + --clr-* Semantic Colors (iris/bao/agent/review/stale/other)

## Hartkodierte Farben eliminiert (0 verbleibend):
- dashboard/v2/*: alle #hex → var(--)* ersetzt
- components/ui/*: alle #hex → var(--)* ersetzt

Task: ea7c2063
Build: ✅ grün

frontend/src/components/ui/Badge.vue

@@ -1,4 +1,11 @@
 <script setup lang="ts">
+/**
+ * Badge — Nexus V2 Status- und Label-Badge
+ *
+ * Erweitert: zusätzliche nexus-token-basierte Varianten für
+ * Agenten-Rollen, Status-Pills und Prioritäten.
+ * Original shadcn-Varianten bleiben erhalten.
+ */
 import type { HTMLAttributes } from 'vue'
 import { cva, type VariantProps } from 'class-variance-authority'
 import { cn } from '@/lib/utils'
@@ -8,10 +15,25 @@ const badgeVariants = cva(
   {
     variants: {
       variant: {
+        // Original shadcn
         default: 'border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80',
         secondary: 'border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80',
         destructive: 'border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80',
         outline: 'text-foreground',
+
+        // Nexus V2 — Token-basierte Varianten (Farben aus nexus-tokens.css)
+        work: 'nexus-badge-work',
+        think: 'nexus-badge-think',
+        blocked: 'nexus-badge-blocked',
+        queue: 'nexus-badge-queue',
+        done: 'nexus-badge-done',
+        review: 'nexus-badge-review',
+        iris: 'nexus-badge-iris',
+        bao: 'nexus-badge-bao',
+        agent: 'nexus-badge-agent',
+        priorityHigh: 'nexus-badge-prio-high',
+        priorityMed: 'nexus-badge-prio-med',
+        priorityLow: 'nexus-badge-prio-low',
       },
     },
     defaultVariants: {
@@ -35,3 +57,78 @@ const props = withDefaults(defineProps<Props>(), {
     <slot />
   </span>
 </template>
+
+<style scoped>
+/* Nexus V2 Token-basierte Badge-Varianten */
+.nexus-badge-work {
+  border-color: rgba(61, 220, 151, .25);
+  background: rgba(34, 197, 94, .12);
+  color: var(--st-work);
+}
+
+.nexus-badge-think {
+  border-color: rgba(52, 214, 245, .25);
+  background: rgba(52, 214, 245, .1);
+  color: var(--st-think);
+}
+
+.nexus-badge-blocked {
+  border-color: rgba(251, 113, 133, .25);
+  background: rgba(244, 63, 94, .12);
+  color: var(--st-block);
+}
+
+.nexus-badge-queue {
+  border-color: rgba(251, 191, 36, .25);
+  background: rgba(251, 191, 36, .12);
+  color: var(--st-queue);
+}
+
+.nexus-badge-done {
+  border-color: rgba(34, 197, 94, .25);
+  background: rgba(34, 197, 94, .12);
+  color: var(--st-work);
+}
+
+.nexus-badge-review {
+  border-color: rgba(249, 115, 22, .25);
+  background: rgba(249, 115, 22, .12);
+  color: var(--clr-review);
+}
+
+.nexus-badge-iris {
+  border-color: rgba(147, 51, 234, .25);
+  background: rgba(147, 51, 234, .12);
+  color: var(--clr-iris);
+}
+
+.nexus-badge-bao {
+  border-color: rgba(59, 130, 246, .25);
+  background: rgba(59, 130, 246, .12);
+  color: var(--clr-bao);
+}
+
+.nexus-badge-agent {
+  border-color: rgba(16, 185, 129, .2);
+  background: rgba(16, 185, 129, .12);
+  color: var(--clr-agent);
+}
+
+.nexus-badge-prio-high {
+  border-color: var(--st-block);
+  background: transparent;
+  color: var(--st-block);
+}
+
+.nexus-badge-prio-med {
+  border-color: var(--st-queue);
+  background: transparent;
+  color: var(--st-queue);
+}
+
+.nexus-badge-prio-low {
+  border-color: var(--a-blue);
+  background: transparent;
+  color: var(--a-blue);
+}
+</style>