restore: reapply 50d95fa UI foundation clobbered by sync in 2ee1fe9

My rsync --delete based deploy sync overwrote the working tree with a stale
local copy and accidentally reverted commit 50d95fa (V2 Design-Fundament,
task ea7c2063) — new ui/ components deleted, token/color work in
dashboard/v2 and nexus-tokens.css rolled back. This restores all 17 files
exactly from 50d95fa; no overlap with the modal rework files (TaskBoardView,
tasks store, BoardCard), which stay as committed in 2ee1fe9.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

frontend/src/components/ui/StatusDot.vue

@@ -0,0 +1,72 @@
+<script setup lang="ts">
+/**
+ * StatusDot — Nexus V2 animierter Status-Indikator
+ *
+ * Kapselt die pulse-keyframes aus nexus-tokens.css.
+ * Status-Farben und Pulse-Animationen stammen ausschließlich aus Tokens.
+ *
+ * Props:
+ *   status  – 'work' | 'think' | 'idle' | 'block' | 'queue'
+ *   size    – 'sm' (8px) | 'md' (9px) | 'lg' (12px), default 'md'
+ *   pulse   – Animation aktiv (default: true für work/think/block)
+ *   label   – Text-Label rechts neben dem Dot (optional)
+ */
+
+withDefaults(defineProps<{
+  status: 'work' | 'think' | 'idle' | 'block' | 'queue'
+  size?: 'sm' | 'md' | 'lg'
+  pulse?: boolean
+  label?: string
+}>(), {
+  size: 'md',
+})
+</script>
+
+<template>
+  <span class="status-dot-wrapper">
+    <span
+      class="dot"
+      :class="[status, size, { pulse: pulse !== false }]"
+      :aria-label="label || status"
+      role="status"
+    ></span>
+    <span v-if="label" class="dot-label">{{ label }}</span>
+  </span>
+</template>
+
+<style scoped>
+.status-dot-wrapper {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.dot {
+  display: inline-block;
+  border-radius: 50%;
+  flex: 0 0 auto;
+}
+
+.dot.sm { width: 7px; height: 7px; }
+.dot.md { width: 9px; height: 9px; }
+.dot.lg { width: 12px; height: 12px; }
+
+/* Farben aus nexus-tokens.css — Single Source of Truth */
+.dot.work  { background: var(--st-work);  }
+.dot.think { background: var(--st-think); }
+.dot.idle  { background: var(--st-idle);  }
+.dot.block { background: var(--st-block); }
+.dot.queue { background: var(--st-queue); }
+
+/* Pulse-Animationen (Keyframes in tokens.css definiert) */
+.dot.work.pulse  { animation: pulse-work  1.8s infinite; box-shadow: 0 0 0 0 rgba(61,220,151,.55); }
+.dot.think.pulse { animation: pulse-think 1.8s infinite; box-shadow: 0 0 0 0 rgba(52,214,245,.55); }
+.dot.block.pulse { animation: pulse-block 1.4s infinite; box-shadow: 0 0 0 0 rgba(251,113,133,.55); }
+
+.dot-label {
+  font-size: 12.5px;
+  font-weight: 600;
+  color: var(--tx-2);
+  white-space: nowrap;
+}
+</style>