Standardize UI typography, charts and empty states

tests/unit/ui-navigation.test.ts

@@ -34,6 +34,13 @@ describe('sidebar navigation', () => {
         }] });
         expect(render(Navigation, { props: { role: 'admin' } }).body).toContain('aria-label="Servers, 1 needs attention"');
     });
+
+    it('counts hosts without servers and clears the badge when the next host summary is healthy', () => {
+        fleet.set({ receivedAt: Date.now(), operations: [], servers: [], hostAttention: 2 });
+        expect(render(Navigation, { props: { role: 'admin' } }).body).toContain('aria-label="Hosts, 2 need attention"');
+        fleet.update(value => ({ ...value, hostAttention: 0 }));
+        expect(render(Navigation, { props: { role: 'admin' } }).body).not.toMatch(/aria-label="Hosts, \d/);
+    });
 });
 
 const user: AuthUser = { id: '1', username: 'operator', displayName: 'Operator', role: 'operator', disabled: false,