feat: Phase 2 — Delegated State, Auth, Review-Gate, Notifications, Zombie-Reset

frontend/src/components/layout/AppSidebar.vue

@@ -1,13 +1,14 @@
 <script setup lang="ts">
-import { computed } from 'vue'
+import { computed, onMounted } from 'vue'
 import {
-  Activity, Bot, Boxes, Command, FileText,
+  Activity, Bell, Bot, Boxes, Command, FileText,
   LayoutDashboard, ListTodo, LogOut, MessageSquareText, Settings,
   Shield, SlidersHorizontal, Sparkles, BookOpen,
   AlertTriangle, Calendar,
 } from '@lucide/vue'
 import { useRouter } from 'vue-router'
 import { useAuthStore } from '../../stores/auth'
+import { useNotificationStore } from '../../stores/notifications'
 import { initials } from '../../utils/format'
 
 const props = defineProps<{
@@ -23,6 +24,11 @@ const emit = defineEmits<{
 
 const auth = useAuthStore()
 const router = useRouter()
+const notificationStore = useNotificationStore()
+
+onMounted(() => {
+  notificationStore.startPolling()
+})
 
 const ownerInitials = computed(() =>
   auth.user?.displayName ? initials(auth.user.displayName) : 'OW'
@@ -37,6 +43,7 @@ const navigation = [
   { label: 'Task Board', icon: ListTodo },
   { label: 'Incidents', icon: AlertTriangle },
   { separator: true },
+  { label: 'Notifications', icon: Bell },
   { label: 'Calendar', icon: Calendar },
   { label: 'Agents', icon: Bot },
   { label: 'Models', icon: SlidersHorizontal },
@@ -76,6 +83,7 @@ async function logout() {
           <span>{{ item.label }}</span>
           <i v-if="item.label === 'Task Board'">{{ queuedTasks }}</i>
           <i v-if="item.label === 'Incidents'">{{ incidents }}</i>
+          <i v-if="item.label === 'Notifications' && notificationStore.unreadCount > 0" class="badge-red">{{ notificationStore.unreadCount }}</i>
         </button>
       </template>
     </nav>
@@ -154,6 +162,9 @@ async function logout() {
   border-radius: 5px;
   line-height: 1.4;
 }
+.nav button i.badge-red {
+  background: #e16e75;
+}
 .nav-separator {
   height: 1px;
   margin: 6px 10px;