feat: Add validation viewing functionality and UI updates

- Implemented a new function to mark validations as viewed by the user, updating the validation state accordingly.
- Added a new API endpoint for marking validations as viewed, integrated with the existing GitHub routes.
- Enhanced the sidebar to display the count of unviewed validations, providing real-time updates.
- Updated the GitHub issues view to mark validations as viewed when issues are accessed, improving user interaction.
- Introduced a visual indicator for unviewed validations in the issue list, enhancing user awareness of pending validations.

apps/ui/src/components/layout/sidebar/hooks/index.ts

@@ -10,3 +10,4 @@ export { useProjectCreation } from './use-project-creation';
 export { useSetupDialog } from './use-setup-dialog';
 export { useTrashDialog } from './use-trash-dialog';
 export { useProjectTheme } from './use-project-theme';
+export { useUnviewedValidations } from './use-unviewed-validations';

apps/ui/src/components/layout/sidebar/hooks/use-navigation.ts

@@ -44,6 +44,8 @@ interface UseNavigationProps {
   setIsProjectPickerOpen: (value: boolean | ((prev: boolean) => boolean)) => void;
   cyclePrevProject: () => void;
   cycleNextProject: () => void;
+  /** Count of unviewed validations to show on GitHub Issues nav item */
+  unviewedValidationsCount?: number;
 }
 
 export function useNavigation({
@@ -61,6 +63,7 @@ export function useNavigation({
   setIsProjectPickerOpen,
   cyclePrevProject,
   cycleNextProject,
+  unviewedValidationsCount,
 }: UseNavigationProps) {
   // Track if current project has a GitHub remote
   const [hasGitHubRemote, setHasGitHubRemote] = useState(false);
@@ -169,6 +172,7 @@ export function useNavigation({
             id: 'github-issues',
             label: 'Issues',
             icon: CircleDot,
+            count: unviewedValidationsCount,
           },
           {
             id: 'github-prs',
@@ -180,7 +184,15 @@ export function useNavigation({
     }
 
     return sections;
-  }, [shortcuts, hideSpecEditor, hideContext, hideTerminal, hideAiProfiles, hasGitHubRemote]);
+  }, [
+    shortcuts,
+    hideSpecEditor,
+    hideContext,
+    hideTerminal,
+    hideAiProfiles,
+    hasGitHubRemote,
+    unviewedValidationsCount,
+  ]);
 
   // Build keyboard shortcuts for navigation
   const navigationShortcuts: KeyboardShortcut[] = useMemo(() => {

apps/ui/src/components/layout/sidebar/hooks/use-unviewed-validations.ts

@@ -0,0 +1,84 @@
+import { useState, useEffect, useCallback } from 'react';
+import { getElectronAPI } from '@/lib/electron';
+import type { Project, StoredValidation } from '@/lib/electron';
+
+/**
+ * Hook to track the count of unviewed (fresh) issue validations for a project.
+ * Also provides a function to decrement the count when a validation is viewed.
+ */
+export function useUnviewedValidations(currentProject: Project | null) {
+  const [count, setCount] = useState(0);
+
+  // Load initial count
+  useEffect(() => {
+    if (!currentProject?.path) {
+      setCount(0);
+      return;
+    }
+
+    const loadCount = async () => {
+      try {
+        const api = getElectronAPI();
+        if (api.github?.getValidations) {
+          const result = await api.github.getValidations(currentProject.path);
+          if (result.success && result.validations) {
+            const unviewed = result.validations.filter((v: StoredValidation) => {
+              if (v.viewedAt) return false;
+              // Check if not stale (< 24 hours)
+              const hoursSince =
+                (Date.now() - new Date(v.validatedAt).getTime()) / (1000 * 60 * 60);
+              return hoursSince <= 24;
+            });
+            setCount(unviewed.length);
+          }
+        }
+      } catch (err) {
+        console.error('[useUnviewedValidations] Failed to load count:', err);
+      }
+    };
+
+    loadCount();
+
+    // Subscribe to validation events to update count
+    const api = getElectronAPI();
+    if (api.github?.onValidationEvent) {
+      const unsubscribe = api.github.onValidationEvent((event) => {
+        if (event.projectPath === currentProject.path) {
+          if (event.type === 'issue_validation_complete') {
+            setCount((prev) => prev + 1);
+          }
+        }
+      });
+      return () => unsubscribe();
+    }
+  }, [currentProject?.path]);
+
+  // Function to decrement count when a validation is viewed
+  const decrementCount = useCallback(() => {
+    setCount((prev) => Math.max(0, prev - 1));
+  }, []);
+
+  // Function to refresh count (e.g., after marking as viewed)
+  const refreshCount = useCallback(async () => {
+    if (!currentProject?.path) return;
+
+    try {
+      const api = getElectronAPI();
+      if (api.github?.getValidations) {
+        const result = await api.github.getValidations(currentProject.path);
+        if (result.success && result.validations) {
+          const unviewed = result.validations.filter((v: StoredValidation) => {
+            if (v.viewedAt) return false;
+            const hoursSince = (Date.now() - new Date(v.validatedAt).getTime()) / (1000 * 60 * 60);
+            return hoursSince <= 24;
+          });
+          setCount(unviewed.length);
+        }
+      }
+    } catch (err) {
+      console.error('[useUnviewedValidations] Failed to refresh count:', err);
+    }
+  }, [currentProject?.path]);
+
+  return { count, decrementCount, refreshCount };
+}